function MainComponent() { const [products, setProducts] = React.useState([]); const [productName, setProductName] = React.useState(''); const [quantity, setQuantity] = React.useState(''); const handleAddProduct = (e)=>{ e.preventDefault(); const newProduct = { id: Date.now(), name: productName, quantity: Number(quantity) }; setProducts([ ...products, newProduct ]); setProductName(''); setQuantity(''); }; const handleDeleteProduct = (productId)=>{ setProducts(products.filter((product)=>product.id !== productId)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-3xl font-bold font-roboto text-[#121212] mb-8", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "在庫管理アプリ"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleAddProduct, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "product-name", className: "block text-sm font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "product-name", name: "productName", className: "w-full p-2 border rounded-md", placeholder: "例：ペン", value: productName, onChange: (e)=>setProductName(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quantity", className: "block text-sm font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "数量"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "quantity", name: "quantity", className: "w-full p-2 border rounded-md", placeholder: "例：100", value: quantity, onChange: (e)=>setQuantity(e.target.value), __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto py-2 rounded-md hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-blue-500 text-white", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "数量"), /*#__PURE__*/ React.createElement("th", { className: "p-4 text-left font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "アクション"))), /*#__PURE__*/ React.createElement("tbody", { className: "font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.id, __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, product.quantity), /*#__PURE__*/ React.createElement("td", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-500 hover:text-red-700 transition-colors", onClick: ()=>handleDeleteProduct(product.id), __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, "削除"))))))))); }