function ReservationSystemHeading({ headerText }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-sans", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, headerText)); } function ReservationSystemHeadingStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReservationSystemHeading, { headerText: "予約システム", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function ToggleCalendarForm({ view, onToggle }) { const buttonText = view === "form" ? "カレンダー" : "Add Reservation"; return /*#__PURE__*/ React.createElement("button", { onClick: onToggle, className: "absolute top-4 right-4 py-2 px-4 bg-green-500 text-white rounded-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, buttonText); } function ToggleCalendarFormStory() { const [view, setView] = React.useState("form"); const handleViewToggle = ()=>{ setView((prevView)=>prevView === "form" ? "calendar" : "form"); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-[400px] h-[400px] border", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ToggleCalendarForm, { view: view, onToggle: handleViewToggle, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function UsernameLabel({ htmlFor, labelText }) { return /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold", htmlFor: htmlFor, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, labelText); } function UsernameLabelStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UsernameLabel, { htmlFor: "username", labelText: "ユーザー名", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UsernameLabel, { htmlFor: "password", labelText: "パスワード", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [reservations, setReservations] = React.useState([ { username: "John Doe", itemname: "Projector", reservationdatetime: "2023-11-12T14:00" }, { username: "Jane Smith", itemname: "Conference Room", reservationdatetime: "2023-11-13T09:00" }, { username: "Mike Johnson", itemname: "Laptop", reservationdatetime: "2023-11-14T11:00" } ]); const [view, setView] = React.useState("form"); const handleSubmit = (event)=>{ event.preventDefault(); const { username, itemname, reservationdatetime } = event.target.elements; const newReservation = { username: username.value, itemname: itemname.value, reservationdatetime: reservationdatetime.value }; setReservations([ ...reservations, newReservation ]); event.target.reset(); }; const handleViewToggle = ()=>{ setView((prevView)=>prevView === "form" ? "calendar" : "form"); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 w-full max-w-[600px] mx-auto relative", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReservationSystemHeading, { headerText: "予約システム", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ToggleCalendarForm, { view: view, onToggle: handleViewToggle, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), view === "form" ? /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(UsernameLabel, { htmlFor: "username", labelText: "ユーザー名", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded-md", type: "text", id: "username", name: "username", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold", htmlFor: "itemname", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "アイテム名"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded-md", type: "text", id: "itemname", name: "itemname", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold", htmlFor: "reservationdatetime", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "予約日時"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-300 rounded-md", type: "datetime-local", id: "reservationdatetime", name: "reservationdatetime", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "予約")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "カレンダー"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 rounded-md p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "アイテム名"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "予約日時")), reservations.map((reservation, index)=>{ const formattedDateTime = reservation.reservationdatetime.replace("T", " "); return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between border-t border-gray-200 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, reservation.username), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, reservation.itemname), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, formattedDateTime)); })))); }