function MainComponent() { const [femaleAnkaraItems, setFemaleAnkaraItems] = React.useState([]); const [maleAnkaraItems, setMaleAnkaraItems] = React.useState([]); const [femaleKenteItems, setFemaleKenteItems] = React.useState([]); const [maleKenteItems, setMaleKenteItems] = React.useState([]); const [westAfricanLaceItems, setWestAfricanLaceItems] = React.useState([]); React.useEffect(()=>{ async function fetchItems(query, subtype, setItemsFunc) { const response = await fetch(`/api/products?query=${query}&subtypes=${subtype}`); const data = await response.json(); setItemsFunc(data); } fetchItems("female ankara dresses", "clothing", setFemaleAnkaraItems); fetchItems("male ankara shirts", "clothing", setMaleAnkaraItems); fetchItems("female kente dresses", "clothing", setFemaleKenteItems); fetchItems("male kente shirts", "clothing", setMaleKenteItems); fetchItems("west african lace", "material", setWestAfricanLaceItems); }, []); function ItemCard({ item }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col max-w-sm rounded overflow-hidden shadow-lg bg-white m-2", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover", src: item.image, alt: `African clothing - ${item.name}`, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 text-base", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Price: ", item.price), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-3", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Add to Cart"))); } function Section({ title, items }) { return /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-bold text-4xl my-4 text-center text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 justify-center items-stretch", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement(ItemCard, { key: item.id, item: item, __source: { fileName: "", lineNumber: 42, columnNumber: 30 }, __self: this })))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#333333] text-white text-center py-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto font-bold text-5xl", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "African Heritage Clothing Store")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Section, { title: "Female Ankara Dresses", items: femaleAnkaraItems, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(Section, { title: "Male Ankara Shirts", items: maleAnkaraItems, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(Section, { title: "Female Kente Dresses", items: femaleKenteItems, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(Section, { title: "Male Kente Shirts", items: maleKenteItems, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(Section, { title: "West African Lace Material", items: westAfricanLaceItems, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333333] text-white text-center py-6 mt-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "© ", new Date().getFullYear(), " African Heritage Clothing Store"))); }