function MainComponent() { const [selectedRarity, setSelectedRarity] = React.useState('L'); const rarityTabs = [ { key: 'L', name: 'Legacy' }, { key: 'E', name: 'Epic' }, { key: 'R', name: 'Rare' }, { key: 'U', name: 'Uncommon' }, { key: 'C', name: 'Common' } ]; const selectRarity = (rarity)=>{ setSelectedRarity(rarity); }; const assetComponents = { L: /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./assets/character1.png", alt: "Legacy rarity character", className: "w-32 h-32", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#54595D] rounded-full w-24 h-6 mt-1", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./assets/character2.png", alt: "Legacy rarity character", className: "w-32 h-32", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#54595D] rounded-full w-24 h-6 mt-1", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./assets/character3.png", alt: "Legacy rarity character", className: "w-32 h-32", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#54595D] rounded-full w-24 h-6 mt-1", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }))) }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#333333] min-h-screen flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto mt-4 p-5 flex justify-between items-center bg-[#121212] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, rarityTabs.map((tab)=>/*#__PURE__*/ React.createElement("button", { key: tab.key, name: `tab-${tab.key}`, className: `px-4 py-2 rounded-full text-sm font-semibold transition-colors ${selectedRarity === tab.key ? 'bg-[#F87171] text-white' : 'bg-[#4B5563] text-[#9CA3AF]'}`, onClick: ()=>selectRarity(tab.key), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, tab.name))), /*#__PURE__*/ React.createElement("div", { className: "my-8", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, assetComponents[selectedRarity])); }