function MainComponent() { const [cards, setCards] = React.useState([]); const [deck, setDeck] = React.useState([]); React.useEffect(()=>{ async function fetchCards() { const response = await fetch('https://api.magicthegathering.io/v1/cards'); const data = await response.json(); setCards(data.cards); } fetchCards(); }, []); function addToDeck(card) { setDeck([ ...deck, card ]); } function removeFromDeck(cardIndex) { setDeck(deck.filter((_, index)=>index !== cardIndex)); } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Magic: The Gathering Deck Builder"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-10", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, cards.slice(0, 50).map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[160px] h-[200px] md:w-[200px] md:h-[280px] bg-white p-2 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.imageUrl, alt: `Magic card name: ${card.name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] text-white py-1 px-3 mt-2 rounded hover:bg-[#0056b3] transition-colors", onClick: ()=>addToDeck(card), __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "Add to Deck")))), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Your Deck"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-start gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, deck.map((card, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[160px] h-[200px] md:w-[200px] md:h-[280px] bg-white p-2 rounded-lg shadow-lg relative", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.imageUrl, alt: `Card in deck: ${card.name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 bg-[#ff4136] text-white py-1 px-3 rounded hover:bg-[#ff4136] transition-colors", onClick: ()=>removeFromDeck(index), __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "Remove", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "🗑️"))))))); }