function MainComponent() { const [birthday, setBirthday] = useState(""); const [days, setDays] = useState(null); const [yearsMonths, setYearsMonths] = useState({ years: 0, months: 0 }); const calculateDays = ()=>{ if (!birthday) return; const birthDate = new Date(birthday); const today = new Date(); const totalDays = Math.floor((today - birthDate) / (1000 * 60 * 60 * 24)); const years = Math.floor(totalDays / 365); const months = Math.floor(totalDays % 365 / 30); setDays(totalDays); setYearsMonths({ years, months }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f0f9ff] to-[#e0f2fe] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-center text-[#1e3a8a] mb-8", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Birthday Counter"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-[#475569] font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "あなたの誕生日を選択してください:"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "birthday", value: birthday, onChange: (e)=>setBirthday(e.target.value), className: "border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-[#60a5fa]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: calculateDays, className: "w-full bg-[#3b82f6] hover:bg-[#2563eb] text-white font-roboto py-3 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "計算する"), days !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-6 bg-[#f8fafc] rounded-lg space-y-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#475569] font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "誕生日からの経過:"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-[#1e3a8a]", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, days.toLocaleString(), " 日")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#475569] font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "年月換算:"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#1e3a8a]", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, yearsMonths.years, "年 ", yearsMonths.months, "ヶ月")))))); }