function RideShareRequestForm({ name, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "date", name: name, value: value, onChange: onChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function RideShareRequestFormStory() { const [formData, setFormData] = React.useState({ date: '' }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RideShareRequestForm, { name: "date", value: formData.date, onChange: handleChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = React.useState({ firstName: "", lastName: "", firstNameKana: "", lastNameKana: "", gender: "", address: "", photo: null }); const [error, setError] = React.useState(null); const [upload, { loading }] = useUpload(); const [photoPreview, setPhotoPreview] = React.useState(null); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevState)=>({ ...prevState, [name]: value })); }; const handlePhotoUpload = async (e)=>{ if (e.target.files) { const file = e.target.files[0]; const { url, error } = await upload({ file }); if (error) { setError(error); return; } setPhotoPreview(url); setFormData((prev)=>({ ...prev, photo: url })); } }; const handleSubmit = ()=>{ console.log(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-md mx-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "ユーザー登録"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 rounded-full bg-gray-200 mb-2 overflow-hidden", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, photoPreview ? /*#__PURE__*/ React.createElement("img", { src: photoPreview, alt: "プロフィール写真", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-4xl text-gray-400", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("label", { className: "bg-blue-500 text-white px-4 py-2 rounded cursor-pointer", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "写真をアップロード", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "hidden", onChange: handlePhotoUpload, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "姓"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "lastName", value: formData.lastName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "セイ"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "lastNameKana", value: formData.lastNameKana, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "firstName", value: formData.firstName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "メイ"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "firstNameKana", value: formData.firstNameKana, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("select", { name: "gender", value: formData.gender, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "女性"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "その他"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "居住区"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", value: formData.address, onChange: handleChange, placeholder: "○○市○○町", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full bg-blue-500 text-white py-3 rounded mt-6", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, "登録する")); }