function ProductManagementForm({ formState, handleInputChange, handleSubmit, isEdit }) { const buttonText = isEdit ? '更新' : '追加'; return /*#__PURE__*/ React.createElement("form", { className: "mb-6", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "productName", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "productName", type: "text", placeholder: "商品名", value: formState.productName, onChange: handleInputChange, __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "quantity", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "数量"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "quantity", type: "number", placeholder: "数量", value: formState.quantity, onChange: handleInputChange, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "price", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "価格"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "price", type: "number", placeholder: "価格", value: formState.price, onChange: handleInputChange, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, buttonText)); } function ProductManagementFormStory() { const [formState, setFormState] = React.useState({ productName: '', quantity: '', price: '' }); const [editIndex, setEditIndex] = React.useState(null); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormState((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = ()=>{ // Simulate form submission console.log(formState); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductManagementForm, { formState: formState, handleInputChange: handleInputChange, handleSubmit: handleSubmit, isEdit: editIndex !== null, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this })); } function MainComponent() { const [products, setProducts] = React.useState([]); const [formState, setFormState] = React.useState({ productName: '', quantity: '', price: '' }); const [editIndex, setEditIndex] = React.useState(null); const handleInputChange = (event)=>{ const { name, value } = event.target; setFormState({ ...formState, [name]: value }); }; const handleSubmit = ()=>{ if (editIndex !== null) { const updatedProducts = products.map((product, index)=>index === editIndex ? formState : product); setProducts(updatedProducts); setEditIndex(null); } else { setProducts([ ...products, formState ]); } setFormState({ productName: '', quantity: '', price: '' }); }; const handleEdit = (index)=>{ setFormState(products[index]); setEditIndex(index); }; const handleDelete = (index)=>{ setProducts(products.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "商品管理システム"), /*#__PURE__*/ React.createElement(ProductManagementForm, { formState: formState, handleInputChange: handleInputChange, handleSubmit: handleSubmit, isEdit: editIndex !== null, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("table", { className: "min-w-full leading-normal", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "数量"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "価格"), /*#__PURE__*/ React.createElement("th", { className: "px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "アクション"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-5 py-5 border-b border-gray-200 bg-white text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, product.productName), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-5 border-b border-gray-200 bg-white text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, product.quantity), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-5 border-b border-gray-200 bg-white text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "¥", product.price), /*#__PURE__*/ React.createElement("td", { className: "px-5 py-5 border-b border-gray-200 bg-white text-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-900 font-bold mr-4 fa fa-edit", onClick: ()=>handleEdit(index), __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-red-600 hover:text-red-900 font-bold fa fa-trash", onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }))))))); }