function MainComponent() { const [cards, setCards] = React.useState([ { id: 1, name: 'Pikachu', type: 'Electric', image: '/images/pikachu-card.jpg' }, { id: 2, name: 'Charizard', type: 'Fire', image: '/images/charizard-card.jpg' }, { id: 3, name: 'Squirtle', type: 'Water', image: '/images/squirtle-card.jpg' } ]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newCard = { id: cards.length + 1, name: formData.get('cardName'), type: formData.get('cardType'), image: URL.createObjectURL(formData.get('image')) }; setCards([ ...cards, newCard ]); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f7f7f7] min-h-screen flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#333] font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Pokémon Card Marketplace"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] mt-2 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Buy and sell your Pokémon cards with ease.")), /*#__PURE__*/ React.createElement("main", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-10", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-2xl text-[#333] mb-4 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Featured Cards"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, cards.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: card.image, alt: `${card.name} Pokémon Card`, className: "h-[200px] w-full object-cover rounded-md", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-xl mt-2 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, card.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, card.type, " Type"), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#FFCB05] text-[#333] py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "Buy Now"))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-2xl text-[#333] mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Sell Your Cards"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardName", placeholder: "Card Name", className: "mb-4 p-2 w-[300px] border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardType", placeholder: "Type (e.g., Fire, Water)", className: "mb-4 p-2 w-[300px] border border-[#ddd] rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FFCB05] text-[#333] py-2 px-4 rounded font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Sell Card"))))); }