function NameInputField({ value, onChange, id = "name", type = "text", placeholder = "氏名", name = "name" }) { return /*#__PURE__*/ React.createElement("input", { value: value, onChange: onChange, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: id, type: type, placeholder: placeholder, name: name, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function NameInputFieldStory() { const [name, setName] = React.useState(""); function handleNameChange(event) { setName(event.target.value); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NameInputField, { value: name, onChange: handleNameChange, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MainComponent() { const [profileList, setProfileList] = React.useState([ { id: "1", name: "山田太郎", gender: "男性", dob: "1985-04-12", photo: "/images/profile1.jpg" }, { id: "2", name: "鈴木花子", gender: "女性", dob: "1990-07-23", photo: "/images/profile2.jpg" }, { id: "3", name: "佐藤健", gender: "男性", dob: "1995-01-30", photo: "/images/profile3.jpg" }, { id: "4", name: "田中琴美", gender: "女性", dob: "1980-11-11", photo: "/images/profile4.jpg" }, { id: "5", name: "伊藤涼子", gender: "女性", dob: "1975-05-05", photo: "/images/profile5.jpg" } ]); const [showForm, setShowForm] = React.useState(false); const [editId, setEditId] = React.useState(null); const [name, setName] = React.useState(''); const [gender, setGender] = React.useState(''); const [dob, setDob] = React.useState(''); const [photo, setPhoto] = React.useState(''); const handleNameChange = (event)=>setName(event.target.value); const handleGenderChange = (event)=>setGender(event.target.value); const handleDobChange = (event)=>setDob(event.target.value); const handlePhotoChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = ()=>setPhoto(reader.result); }; const resetForm = ()=>{ setName(''); setGender(''); setDob(''); setPhoto(''); setEditId(null); }; const handleEdit = (profile)=>{ setShowForm(true); setEditId(profile.id); setName(profile.name); setGender(profile.gender); setDob(profile.dob); setPhoto(profile.photo); }; const handleSubmit = (event)=>{ event.preventDefault(); const newProfile = { id: editId ? editId : Date.now().toString(), name, gender, dob, photo }; if (editId) { setProfileList((current)=>current.map((profile)=>profile.id === editId ? newProfile : profile)); } else { setProfileList((current)=>[ newProfile, ...current ]); } resetForm(); setShowForm(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(true), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "プロフィール登録"), showForm ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(NameInputField, { value: name, onChange: handleNameChange, placeholder: "氏名", name: "name", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: handleGenderChange, value: gender, name: "gender", className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "性別を選択"), /*#__PURE__*/ React.createElement("option", { value: "男性", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "女性", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "女性"))), /*#__PURE__*/ React.createElement(NameInputField, { value: dob, onChange: handleDobChange, placeholder: "生年月日", name: "dob", type: "date", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handlePhotoChange, className: "my-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), photo && /*#__PURE__*/ React.createElement("img", { src: photo, alt: `${name}の顔写真`, className: "w-20 h-20 rounded-full mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ resetForm(); setShowForm(false); }, type: "button", className: "ml-4 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "キャンセル")) : /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto w-full", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left text-gray-800 border border-gray-300", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "氏名"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left text-gray-800 border border-gray-300", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left text-gray-800 border border-gray-300", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, "生年月日"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left text-gray-800 border border-gray-300", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, "顔写真"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2 text-left text-gray-800 border border-gray-300", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, profileList.map((profile)=>/*#__PURE__*/ React.createElement("tr", { key: profile.id, __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this }, profile.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }, profile.gender), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, profile.dob), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profile.photo, alt: `${profile.name}の顔写真`, className: "w-10 h-10 rounded-full", __source: { fileName: "", lineNumber: 90, columnNumber: 54 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(profile), className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline mr-2", __source: { fileName: "", lineNumber: 92, columnNumber: 23 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setProfileList(profileList.filter((p)=>p.id !== profile.id)), className: "bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }, "削除"))))))))); }

氏名	性別	生年月日
山田太郎	男性	1985-04-12
鈴木花子	女性	1990-07-23
佐藤健	男性	1995-01-30
田中琴美	女性	1980-11-11
伊藤涼子	女性	1975-05-05