function MainComponent() { const [inventoryItems, setInventoryItems] = React.useState([]); const [newItem, setNewItem] = React.useState({ category: "", maker: "", name: "", modelNumber: "", managementNumber: "" }); const [searchQuery, setSearchQuery] = React.useState(""); const [filterBy, setFilterBy] = React.useState("all"); const handleInputChange = (event)=>{ const { name, value } = event.target; setNewItem((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = (event)=>{ event.preventDefault(); setInventoryItems((prevItems)=>[ ...prevItems, { ...newItem, id: prevItems.length + 1 } ]); setNewItem({ category: "", maker: "", name: "", modelNumber: "", managementNumber: "" }); }; const handleSearchChange = (event)=>{ setSearchQuery(event.target.value); }; const filteredItems = inventoryItems.filter((item)=>{ const searchLower = searchQuery.toLowerCase(); if (filterBy === "all") { return item.name.toLowerCase().includes(searchLower) || item.category.toLowerCase().includes(searchLower) || item.maker.toLowerCase().includes(searchLower) || item.modelNumber.toLowerCase().includes(searchLower) || item.managementNumber.toLowerCase().includes(searchLower); } else { return item[filterBy]?.toLowerCase().includes(searchLower); } }); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f4f7f6] min-h-screen", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-12", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "mb-8", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-4xl font-semibold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "商品追加"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("input", { name: "category", type: "text", className: "px-3 py-2 border border-gray-300 rounded-md", value: newItem.category, onChange: handleInputChange, __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "メーカー"), /*#__PURE__*/ React.createElement("input", { name: "maker", type: "text", className: "px-3 py-2 border border-gray-300 rounded-md", value: newItem.maker, onChange: handleInputChange, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("input", { name: "name", type: "text", className: "px-3 py-2 border border-gray-300 rounded-md", value: newItem.name, onChange: handleInputChange, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "型番"), /*#__PURE__*/ React.createElement("input", { name: "modelNumber", type: "text", className: "px-3 py-2 border border-gray-300 rounded-md", value: newItem.modelNumber, onChange: handleInputChange, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "管理番号"), /*#__PURE__*/ React.createElement("input", { name: "managementNumber", type: "text", className: "px-3 py-2 border border-gray-300 rounded-md", value: newItem.managementNumber, onChange: handleInputChange, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "検索&絞り込み"), /*#__PURE__*/ React.createElement("input", { placeholder: "検索", className: "px-3 py-2 border border-gray-300 rounded-md", value: searchQuery, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "ml-2 px-3 py-2 border border-gray-300 rounded-md", value: filterBy, onChange: (e)=>setFilterBy(e.target.value), __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "全て"), /*#__PURE__*/ React.createElement("option", { value: "category", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("option", { value: "maker", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "メーカー"), /*#__PURE__*/ React.createElement("option", { value: "name", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("option", { value: "modelNumber", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "型番"), /*#__PURE__*/ React.createElement("option", { value: "managementNumber", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "管理番号"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "在庫一覧"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, filteredItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "bg-white shadow overflow-hidden sm:rounded-lg p-4 mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 74, columnNumber: 23 }, __self: this }, "カテゴリ: ", item.category), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 75, columnNumber: 23 }, __self: this }, "メーカー: ", item.maker), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 76, columnNumber: 23 }, __self: this }, "商品名: ", item.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 77, columnNumber: 23 }, __self: this }, "型番: ", item.modelNumber), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 78, columnNumber: 23 }, __self: this }, "管理番号: ", item.managementNumber)), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-1 bg-[#ffe5e5] text-[#ff0000] rounded-full", onClick: ()=>setInventoryItems(inventoryItems.filter((i)=>i.id !== item.id)), __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, "削除"))))))))); }