function MainComponent() { const [selectedCategory, setSelectedCategory] = React.useState('HALO'); const [selectedTab, setSelectedTab] = React.useState('Figures'); const categories = [ { name: 'HALO', bgColor: 'bg-[#6e7f99]' }, { name: 'POKEMON', bgColor: 'bg-[#5ee0d3]' }, { name: 'MASTERS', bgColor: 'bg-[#8a4ea0]' }, { name: 'HOT WHEELS', bgColor: 'bg-[#0085ca]' }, { name: 'BARBIE', bgColor: 'bg-[#e0929f]' }, { name: 'TESLA', bgColor: 'bg-black' } ]; const figures = [ { name: 'Soren-066', image: '/soren-066.jpg' }, { name: 'Elite Minor', image: '/elite-minor.jpg' }, { name: 'UNSC Marine', image: '/unsc-marine.jpg' }, { name: 'Spartan', image: '/spartan.jpg' }, { name: 'ODST Soldier', image: '/odst-soldier.jpg' }, { name: 'Sniper', image: '/sniper.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-white shadow-md", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/mega-logo.png", alt: "Mega Unboxed Logo", className: "w-24 h-auto mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 30, columnNumber: 75 }, __self: this }), " Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 75 }, __self: this }), " Build")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt mr-2", __source: { fileName: "", lineNumber: 32, columnNumber: 75 }, __self: this }), " Share")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-blue-600 font-bold bg-gray-100 py-2 px-4 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-box-open mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 115 }, __self: this }), " Collect")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 34, columnNumber: 75 }, __self: this }), " Profile")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-h mr-2", __source: { fileName: "", lineNumber: 35, columnNumber: 75 }, __self: this }), " More")))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Collect"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative mr-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search", className: "pl-10 pr-4 py-2 border rounded-full w-64 bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 p-2 rounded-full", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sliders-h", __source: { fileName: "", lineNumber: 49, columnNumber: 64 }, __self: this }))))), /*#__PURE__*/ React.createElement("section", { className: "p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4 overflow-x-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.name, className: `${category.bgColor} text-white px-4 py-2 rounded-lg flex-shrink-0 ${selectedCategory === category.name ? 'ring-2 ring-orange-500' : ''}`, onClick: ()=>setSelectedCategory(category.name), __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, category.name))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4 border-b", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-semibold pb-2 ${selectedTab === 'Sets' ? 'text-gray-800 border-b-2 border-gray-800' : 'text-gray-500'}`, onClick: ()=>setSelectedTab('Sets'), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cubes mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), " Sets"), /*#__PURE__*/ React.createElement("button", { className: `font-semibold pb-2 ${selectedTab === 'Figures' ? 'text-gray-800 border-b-2 border-orange-500' : 'text-gray-500'}`, onClick: ()=>setSelectedTab('Figures'), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-astronaut mr-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), " Figures")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, figures.map((figure)=>/*#__PURE__*/ React.createElement("div", { key: figure.name, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: figure.image, alt: figure.name, className: "w-full h-64 object-contain", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, figure.name))))))), /*#__PURE__*/ React.createElement("footer", { className: "absolute bottom-0 left-0 w-64 p-4 text-xs text-gray-500", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/esrb-logo.png", alt: "ESRB Logo", className: "w-8 h-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/us-flag.png", alt: "US Flag", className: "w-4 h-auto mr-1", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "EN"))), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "©2024 MEGA Brands Inc."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "©2024 Mattel"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-600", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Privacy Statement"))); }