function CustomerInformationInputScreen({ headerText, inputName }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, headerText), /*#__PURE__*/ React.createElement("input", { name: inputName, className: "border-2 border-pink-500 rounded-lg p-2 mb-4 w-full", placeholder: "入力してください", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function CustomerInformationInputScreenStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CustomerInformationInputScreen, { headerText: "顧客情報を入力する画面", inputName: "customerInfo", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = React.useState({ name: '', address: '', phone: '', email: '', gender: '', age: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(formData); // Logic to update the dashboard with the form data }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "顧客情報を入力する画面"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "name", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("input", { className: "w-full border px-3 py-2", type: "text", id: "name", name: "name", value: formData.name, onChange: handleChange, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "address", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "住所"), /*#__PURE__*/ React.createElement("input", { className: "w-full border px-3 py-2", type: "text", id: "address", name: "address", value: formData.address, onChange: handleChange, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "phone", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "電話番号"), /*#__PURE__*/ React.createElement("input", { className: "w-full border px-3 py-2", type: "tel", id: "phone", name: "phone", value: formData.phone, onChange: handleChange, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "email", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { className: "w-full border px-3 py-2", type: "email", id: "email", name: "email", value: formData.email, onChange: handleChange, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "gender", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("select", { className: "w-full border px-3 py-2", id: "gender", name: "gender", value: formData.gender, onChange: handleChange, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", hidden: true, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "女性"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "その他"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-roboto mb-1", htmlFor: "age", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "年代"), /*#__PURE__*/ React.createElement("select", { className: "w-full border px-3 py-2", id: "age", name: "age", value: formData.age, onChange: handleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", hidden: true, __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "20s", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "20代"), /*#__PURE__*/ React.createElement("option", { value: "30s", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "30代"), /*#__PURE__*/ React.createElement("option", { value: "40s", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "40代"), /*#__PURE__*/ React.createElement("option", { value: "50s", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "50代"), /*#__PURE__*/ React.createElement("option", { value: "60s", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "60代"), /*#__PURE__*/ React.createElement("option", { value: "70s", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "70代以上"))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2", type: "submit", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "送信"))); }