function MainComponent() { const [reservation, setReservation] = React.useState({ name: '', date: '', time: '', service: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setReservation((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(reservation); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f3f4f6] p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-center text-[#333] mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "予約フォーム"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-[#666]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "お名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: reservation.name, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-white border border-[#ccc] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#0d9488] focus:border-transparent", placeholder: "例：山田太郎", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "block text-sm font-medium text-[#666]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "予約日"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "date", name: "date", value: reservation.date, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-white border border-[#ccc] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#0d9488] focus:border-transparent", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "time", className: "block text-sm font-medium text-[#666]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "予約時間"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "time", name: "time", value: reservation.time, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-white border border-[#ccc] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#0d9488] focus:border-transparent", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "service", className: "block text-sm font-medium text-[#666]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "サービス種類"), /*#__PURE__*/ React.createElement("select", { id: "service", name: "service", value: reservation.service, onChange: handleChange, className: "mt-1 block w-full px-3 py-2 bg-white border border-[#ccc] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#0d9488] focus:border-transparent", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "カット"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "カラーリング"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "パーマ"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "トリートメント"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#0d9488] text-white font-medium rounded-md hover:bg-[#059669] focus:outline-none focus:ring-2 focus:ring-[#64f4ac] focus:ring-offset-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "予約する"))))); }