function MainComponent() { const [featuredSweets, setFeaturedSweets] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [filterType, setFilterType] = React.useState(''); React.useEffect(()=>{ // Fetch featured sweets data here const dummyData = [ { id: 1, name: 'Chestnut Cake', description: 'A delicious autumn cake', rating: 4.5, image: '/images/chestnut-cake.jpg' }, { id: 2, name: 'Marron Glacé', description: 'Classic French candied chestnuts', rating: 4.8, image: '/images/marron-glace.jpg' }, { id: 3, name: 'Chestnut Pudding', description: 'Creamy and rich dessert', rating: 4.2, image: '/images/chestnut-pudding.jpg' } ]; setFeaturedSweets(dummyData); }, []); const handleSearch = (e)=>{ setSearchTerm(e.target.value); }; const handleFilter = (e)=>{ setFilterType(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFF8DC] min-h-screen font-open-sans", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#D2691E] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-playfair font-bold", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "栗スイーツ"), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Sweets"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 34, columnNumber: 39 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "hidden md:block", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 35, columnNumber: 45 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 md:px-10 py-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-playfair text-[#8B4513] mb-8", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Discover Chestnut Sweets"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search sweets...", className: "w-full p-2 rounded border border-[#D2691E]", value: searchTerm, onChange: handleSearch, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "mt-4 w-full p-2 rounded border border-[#D2691E]", value: filterType, onChange: handleFilter, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "All Types"), /*#__PURE__*/ React.createElement("option", { value: "cake", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Cakes"), /*#__PURE__*/ React.createElement("option", { value: "pastry", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Pastries"), /*#__PURE__*/ React.createElement("option", { value: "icecream", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Ice Creams"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, featuredSweets.map((sweet)=>/*#__PURE__*/ React.createElement("div", { key: sweet.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: sweet.image, alt: `${sweet.name} - a delicious chestnut sweet`, className: "w-full h-64 object-cover", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, sweet.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, sweet.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500 mr-1", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 69, columnNumber: 58 }, __self: this })), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, sweet.rating.toFixed(1)))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#D2691E] text-white p-8", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Follow Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 83, columnNumber: 60 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 84, columnNumber: 60 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F4A460]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 85, columnNumber: 60 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Newsletter"), /*#__PURE__*/ React.createElement("form", { className: "flex", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Your email", className: "p-2 rounded-l", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#8B4513] text-white p-2 rounded-r", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Subscribe"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { animation: spin 1s linear infinite; } `)); }