function MainComponent() { const [addresses, setAddresses] = React.useState([ { id: 1, recipient: '山田太郎', address: '〒100-0001 東京都千代田区', phone: '03-1234-5678', isMain: true }, { id: 2, recipient: '佐藤花子', address: '〒542-0076 大阪市中央区', phone: '06-1234-5678', isMain: false } ]); const [showForm, setShowForm] = React.useState(false); const [newAddress, setNewAddress] = React.useState({ recipient: '', address: '', phone: '' }); const handleDelete = (id)=>{ setAddresses(addresses.filter((address)=>address.id !== id)); }; const handleSetMain = (id)=>{ setAddresses(addresses.map((address)=>{ if (address.id === id) { return { ...address, isMain: true }; } return { ...address, isMain: false }; })); }; const handleAddButtonClick = ()=>setShowForm(true); const handleInputChange = (e)=>{ const { name, value } = e.target; setNewAddress({ ...newAddress, [name]: value }); }; const handleFormSubmit = (e)=>{ e.preventDefault(); const newId = addresses.length + 1; setAddresses([ ...addresses, { ...newAddress, id: newId, isMain: false } ]); setNewAddress({ recipient: '', address: '', phone: '' }); setShowForm(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "配送先住所一覧"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, addresses.map((address)=>/*#__PURE__*/ React.createElement("li", { key: address.id, className: "border-b py-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "受取人名: ", address.recipient), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, address.address), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "電話番号: ", address.phone)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, address.isMain ? /*#__PURE__*/ React.createElement("span", { className: "text-[#FFA500] text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "★") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSetMain(address.id), className: "bg-[#FFA500] text-white py-1 px-4 mr-2", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }, "メイン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(address.id), className: "bg-[#D14343] text-white py-1 px-4", __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, "削除")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAddButtonClick, className: "bg-[#4CAF50] text-white py-2 px-6", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "追加する"))), showForm && /*#__PURE__*/ React.createElement("div", { className: "p-4 mt-6 bg-white border", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "新規配送先住所を追加"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "block w-full py-2 px-3 border", name: "recipient", value: newAddress.recipient, onChange: handleInputChange, placeholder: "受取人名", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "block w-full py-2 px-3 border", name: "address", value: newAddress.address, onChange: handleInputChange, placeholder: "住所", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "block w-full py-2 px-3 border", name: "phone", value: newAddress.phone, onChange: handleInputChange, placeholder: "電話番号", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white py-2 px-6 w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "保存")))); }