function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [products, setProducts] = React.useState([ { id: 1, name: 'Cute Bunny', price: 19.99, image: '/images/bunny.jpg' }, { id: 2, name: 'Adorable Elephant', price: 24.99, image: '/images/elephant.jpg' }, { id: 3, name: 'Sweet Penguin', price: 22.99, image: '/images/penguin.jpg' }, { id: 4, name: 'Cuddly Bear', price: 21.99, image: '/images/bear.jpg' }, { id: 5, name: 'Lovely Cat', price: 18.99, image: '/images/cat.jpg' }, { id: 6, name: 'Charming Unicorn', price: 26.99, image: '/images/unicorn.jpg' } ]); const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-purple-600", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Cute Amigurumi Shop"), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto mt-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search cute amigurumi...", className: "w-full p-2 rounded-full border-2 border-purple-300 focus:outline-none focus:border-purple-500", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, filteredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Cute ${product.name} amigurumi toy`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-purple-700", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "$", product.price.toFixed(2)), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-pink-500 text-white py-2 rounded-full hover:bg-pink-600 transition-colors duration-200", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Add to Cart")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-purple-600 text-white py-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "About Our Shop"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-100", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "We create handmade, adorable amigurumi toys with love and care. Each piece is unique and perfect for gifting or collecting. Our passion for crochet and cute creatures comes alive in every stitch!")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Newsletter"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-100 mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Stay updated with our latest creations and exclusive offers!"), /*#__PURE__*/ React.createElement("form", { className: "flex", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your email address", className: "flex-grow p-2 rounded-l-full focus:outline-none text-purple-800", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-pink-500 text-white px-4 py-2 rounded-r-full hover:bg-pink-600 transition-colors duration-200", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Subscribe"))))))); }