function MainComponent() { const [daysLeft, setDaysLeft] = useState(0); const [currentDate, setCurrentDate] = useState(""); useEffect(()=>{ const calculateDays = ()=>{ const now = new Date(); const endOfYear = new Date(2024, 11, 31); const diff = endOfYear - now; const days = Math.ceil(diff / (1000 * 60 * 60 * 24)); setDaysLeft(days); const year = now.getFullYear(); const month = now.getMonth() + 1; const day = now.getDate(); setCurrentDate(`${year}年${month}月${day}日`); }; calculateDays(); const timer = setInterval(calculateDays, 86400000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f2eb] relative overflow-hidden", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-10", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-full h-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M0,50 Q25,45 50,50 T100,50 T150,50", fill: "none", stroke: "#1a4b84", strokeWidth: "0.5", className: "animate-wave", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M0,60 Q25,55 50,60 T100,60 T150,60", fill: "none", stroke: "#1a4b84", strokeWidth: "0.5", className: "animate-wave", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M0,70 Q25,65 50,70 T100,70 T150,70", fill: "none", stroke: "#1a4b84", strokeWidth: "0.5", className: "animate-wave", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex flex-col items-center justify-center min-h-screen p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#1a4b84] font-noto-serif-jp mb-12 text-2xl tracking-widest", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, currentDate), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#8b1f41] text-8xl md:text-9xl font-zen-antique transition-all duration-1000 ease-in-out", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, daysLeft), /*#__PURE__*/ React.createElement("div", { className: "text-[#1a4b84] font-noto-serif-jp text-3xl ml-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "日余り")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-wave { animation: wave 15s linear infinite; } `)); }