function MainComponent() { const [filter, setFilter] = React.useState(''); const handleFilterChange = (event)=>{ setFilter(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f1f4f9]", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "products", className: "py-10 bg-[#ffffff]", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-6", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-center mb-8", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Product Catalog"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "filter", className: "font-roboto text-gray-700 mr-2", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "SKU:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "filter", name: "filter", placeholder: "Filter by SKU...", value: filter, onChange: handleFilterChange, className: "bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#121212] text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); }