function MainComponent({ status, salonName, serviceList, selectedService, appointmentTime, handleServiceChange, handleTimeChange, handleSubmit }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto my-8 p-5 border shadow-lg rounded-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-[#334155] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, salonName), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "service", className: "block text-sm font-medium text-[#475569]", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "サービスを選択"), /*#__PURE__*/ React.createElement("select", { id: "service", name: "service", value: selectedService, onChange: handleServiceChange, className: "mt-1 block w-full p-2 border rounded-md bg-white shadow-sm text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, serviceList.map((service)=>/*#__PURE__*/ React.createElement("option", { key: service.id, value: service.id, __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, service.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "appointmentTime", className: "block text-sm font-medium text-[#475569]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "予約時間"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "appointmentTime", name: "appointmentTime", value: appointmentTime, onChange: handleTimeChange, className: "mt-1 block w-full p-2 border rounded-md bg-white shadow-sm text-sm", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#64748B] hover:bg-[#475569] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#64748B]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "予約する")), status && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-center mt-3", __source: { fileName: "", lineNumber: 24, columnNumber: 18 }, __self: this }, status)); } function StoryComponent() { const salonName = "サンプル美容室"; const serviceList = [ { id: '1', name: 'カット' }, { id: '2', name: 'カラーリング' }, { id: '3', name: 'パーマ' } ]; const selectedService = '1'; const appointmentTime = '2023-04-20T15:00'; const status = "次の予約が可能です: 4月20日 15時"; const handleServiceChange = ()=>{}; const handleTimeChange = ()=>{}; const handleSubmit = (e)=>e.preventDefault(); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { salonName: salonName, serviceList: serviceList, selectedService: selectedService, appointmentTime: appointmentTime, handleServiceChange: handleServiceChange, handleTimeChange: handleTimeChange, handleSubmit: handleSubmit, status: status, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); }