function MainComponent() { const [activeCategory, setActiveCategory] = React.useState('ring'); const categories = [ { name: 'ring', label: 'Rings', image: './ring.jpg', alt: 'Sample Ring Image', description: 'Discover our various ring designs.' }, { name: 'necklace', label: 'Necklaces', image: './necklace.jpg', alt: 'Sample Necklace Image', description: 'Explore our necklace collection.' }, { name: 'earring', label: 'Earrings', image: './earring.jpg', alt: 'Sample Earring Image', description: 'Find the perfect pair of earrings.' }, { name: 'bracelet', label: 'Bracelets', image: './bracelet.jpg', alt: 'Sample Bracelet Image', description: 'Browse our selection of bracelets.' } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#FFF7F8] min-h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#D90429] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Newartsilversity"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "🔍"), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "🛒"), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "💖"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto pb-5 space-x-5", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.name, name: `${category.name}Category`, onClick: ()=>setActiveCategory(category.name), className: `flex flex-col items-center justify-center w-[85px] h-[85px] rounded-full border-2 border-transparent ${activeCategory === category.name ? 'border-[#D90429]' : 'border-transparent'}`, __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: category.image, alt: category.alt, className: "w-[40px] h-[40px] object-cover mb-1", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, category.label)))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, categories.filter((cat)=>cat.name === activeCategory).map((activeCat)=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 shadow-md", key: activeCat.name, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: activeCat.image, alt: activeCat.alt, className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] mt-2 text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, activeCat.label), /*#__PURE__*/ React.createElement("p", { className: "text-[#606770] text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, activeCat.description), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-[#D90429] text-white px-4 py-2 rounded hover:bg-[#bb0226] transition duration-300", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Add to Cart")))))); }