function TimerDisplay({ initialMinutes = 0, initialSeconds = 0 }) { const [minutes, setMinutes] = useState(initialMinutes); const [seconds, setSeconds] = useState(initialSeconds); const formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-mono bg-gray-100 px-6 py-3 rounded-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, formattedTime)); } function TimerDisplayStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TimerDisplay, { initialMinutes: 0, initialSeconds: 0, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TimerDisplay, { initialMinutes: 1, initialSeconds: 30, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TimerDisplay, { initialMinutes: 59, initialSeconds: 59, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const [openDoors, setOpenDoors] = useState([]); const currentDate = new Date(); const currentDay = currentDate.getDate(); const currentMonth = currentDate.getMonth() + 1; const toggleDoor = (day)=>{ if (currentMonth === 12 && day <= currentDay) { if (openDoors.includes(day)) { setOpenDoors(openDoors.filter((d)=>d !== day)); } else { setOpenDoors([ ...openDoors, day ]); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a4635] py-8 px-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-crimson-text text-[#e6b34b] text-center mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "🎄 クリスマスアドベントカレンダー 🎄"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 24 }) ].map((_, index)=>{ const day = index + 1; const isOpen = openDoors.includes(day); const isEnabled = currentMonth === 12 && day <= currentDay; return /*#__PURE__*/ React.createElement("div", { key: day, onClick: ()=>toggleDoor(day), className: `aspect-square rounded-lg ${isEnabled ? "cursor-pointer transform hover:scale-105 transition-transform" : "cursor-not-allowed opacity-75"} ${isOpen ? "bg-[#e6b34b]" : "bg-[#c41e3a]"} flex items-center justify-center relative shadow-lg`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 flex items-center justify-center ${isOpen ? "opacity-100" : "opacity-0"} transition-opacity duration-300`, __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "🎁")), /*#__PURE__*/ React.createElement("span", { className: `font-crimson-text text-2xl md:text-3xl ${isOpen ? "text-[#0a4635]" : "text-[#e6b34b]"}`, __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, day)); })))); }