function MainComponent() { const [giftCards, setGiftCards] = React.useState([ { id: 1, brand: 'Amazon', value: 50 }, { id: 2, brand: 'Starbucks', value: 25 }, { id: 3, brand: 'Apple', value: 100 } ]); const handleBuy = (id)=>{ // Implement buy functionality }; const handleSellSubmit = (event)=>{ event.preventDefault(); const brand = event.target.brand.value; const value = event.target.value.value; const newCard = { id: giftCards.length + 1, brand, value: Number(value) }; setGiftCards([ ...giftCards, newCard ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-[#121212] my-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Welcome to GiftCardHub"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-center text-gray-700 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Your one-stop marketplace for buying and selling gift cards")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, giftCards.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: "p-4 border border-gray-200 rounded-lg flex flex-col items-center shadow-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, card.brand, " Gift Card"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "$", card.value), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleBuy(card.id), className: "px-4 py-2 bg-[#1e90ff] text-white rounded hover:bg-[#1c86ee] transition duration-200", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Buy Now")))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Have a gift card to sell?"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSellSubmit, className: "flex flex-col gap-3", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "brand", placeholder: "Brand", required: true, className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "value", placeholder: "Value", required: true, className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-200", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Sell Card"))))); }

Welcome to GiftCardHub

Amazon Gift Card

Starbucks Gift Card

Apple Gift Card

Have a gift card to sell?

Welcome to GiftCardHub

Amazon Gift Card

Starbucks Gift Card

Apple Gift Card

Have a gift card to sell?