function MainComponent() { const startDate = new Date('2023-05-25'); const today = new Date(); const diffTime = Math.abs(today - startDate); const todayDiffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const [selectedDate, setSelectedDate] = React.useState(''); const [dayCount, setDayCount] = React.useState(todayDiffDays); const calculateDays = ()=>{ if (selectedDate) { const selected = new Date(selectedDate); const diffTime = Math.abs(selected - startDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); setDayCount(diffDays); } }; const formatDate = (date)=>{ return date.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' }); }; return /*#__PURE__*/ React.createElement("div", { className: "card w-[300px]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "card-header", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "card-title", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "日数カウンター")), /*#__PURE__*/ React.createElement("div", { className: "card-content", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "開始日: ", formatDate(startDate))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dateInput", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "日付を選択:"), /*#__PURE__*/ React.createElement("input", { id: "dateInput", className: "input", type: "date", value: selectedDate, name: "dateInput", onChange: (e)=>setSelectedDate(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: calculateDays, className: "btn w-full", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "計算"), /*#__PURE__*/ React.createElement("div", { className: "text-center font-bold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, selectedDate ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, formatDate(new Date(selectedDate)), "は", dayCount, "日目です。") : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "今日（", formatDate(new Date()), "）は", dayCount, "日目です。"))))); }