function MainComponent() { const [search, setSearch] = React.useState(''); const [data, setData] = React.useState([ { id: 1, name: 'Приклад', category: 'Категорія 1', price: 100 } ]); const handleSearchChange = (e)=>{ setSearch(e.target.value); }; const filteredData = data.filter((item)=>item.name.toLowerCase().includes(search.toLowerCase()) || item.category.toLowerCase().includes(search.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "База даних"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Пошук...", className: "p-2 border border-gray-300 rounded", value: search, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left border-collapse", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "ID"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Назва"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Категорія"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Ціна"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Дії"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, filteredData.map((item)=>/*#__PURE__*/ React.createElement("tr", { key: item.id, __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, item.id), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, item.category), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, item.price), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, "Редагувати"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-red-500 text-white rounded ml-2", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "Видалити")))))))); }