function MainComponent() { const [quantity, setQuantity] = React.useState(1); const [selectedTab, setSelectedTab] = React.useState('buy'); const handleQuantityChange = (event)=>{ setQuantity(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); // Process order submission or selling form logic }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Clothify"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `text-lg font-roboto px-4 py-1 mr-2 ${selectedTab === 'buy' ? 'text-white bg-[#0d6efd]' : 'text-[#121212] bg-transparent'}`, onClick: ()=>setSelectedTab('buy'), __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Buy"), /*#__PURE__*/ React.createElement("button", { className: `text-lg font-roboto px-4 py-1 ${selectedTab === 'sell' ? 'text-white bg-[#0d6efd]' : 'text-[#121212] bg-transparent'}`, onClick: ()=>setSelectedTab('sell'), __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Sell")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, selectedTab === 'buy' && /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Featured Clothes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this })), selectedTab === 'sell' && /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-roboto mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Sell Your Clothes"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col max-w-md mx-auto", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Item title", className: "border-2 border-[#121212] rounded-lg text-lg p-2 mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Item description", className: "border-2 border-[#121212] rounded-lg text-lg p-2 mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "price", placeholder: "Price", className: "border-2 border-[#121212] rounded-lg text-lg p-2 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", className: "border-2 border-[#121212] rounded-lg text-lg p-2 mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#0d6efd] hover:bg-[#0b5ed7] text-white font-roboto font-bold py-2 rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, "List Item"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white shadow p-4 mt-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "© 2023 Clothify, Inc."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` body { margin: 0; font-family: 'Roboto', sans-serif; } `)); }