function CrowdLevel({ crowdLevel = "normal" }) { const levelColors = { empty: "bg-green-500", normal: "bg-yellow-500", crowded: "bg-red-500" }; const levelText = { empty: "空いています", normal: "普通です", crowded: "混雑しています" }; const bgColor = levelColors[crowdLevel]; const text = levelText[crowdLevel]; return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-2 rounded-lg px-4 py-2 text-white font-noto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${bgColor} w-3 h-3 rounded-full`, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, text)); } function CrowdLevelStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CrowdLevel, { crowdLevel: "empty", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CrowdLevel, { crowdLevel: "normal", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CrowdLevel, { crowdLevel: "crowded", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function Calendar({ onDateClick, selectedDate = new Date() }) { const [currentDate, setCurrentDate] = useState(selectedDate); const getDaysInMonth = (date)=>{ const year = date.getFullYear(); const month = date.getMonth(); return new Date(year, month + 1, 0).getDate(); }; const getFirstDayOfMonth = (date)=>{ return new Date(date.getFullYear(), date.getMonth(), 1).getDay(); }; const handlePrevMonth = ()=>{ setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)); }; const handleNextMonth = ()=>{ setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)); }; const renderCalendar = ()=>{ const daysInMonth = getDaysInMonth(currentDate); const firstDay = getFirstDayOfMonth(currentDate); const days = []; for(let i = 0; i < firstDay; i++){ days.push(/*#__PURE__*/ React.createElement("div", { key: `empty-${i}`, className: "p-2", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this })); } for(let day = 1; day <= daysInMonth; day++){ const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); days.push(/*#__PURE__*/ React.createElement("button", { key: day, onClick: ()=>onDateClick(date), className: "p-2 hover:bg-gray-100 rounded-full w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, day)); } return days; }; const weekDays = [ "日", "月", "火", "水", "木", "金", "土" ]; return /*#__PURE__*/ React.createElement("div", { className: "font-noto-sans max-w-md mx-auto bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevMonth, className: "p-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, currentDate.getFullYear(), "年", currentDate.getMonth() + 1, "月"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextMonth, className: "p-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, weekDays.map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "text-center font-medium p-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, day)), renderCalendar())); } function CalendarStory() { const handleDateClick = (date)=>{ alert(`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日がクリックされました`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 min-h-screen", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Calendar, { onDateClick: handleDateClick, __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1e40af] text-white py-6 shadow-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-4xl text-center font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "ディズニーランド混雑予測")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))); }