function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [filter, setFilter] = React.useState(null); const posts = [ { id: 1, category: "self-care", title: "Bottled Soap", description: "Almost full bottle of soap available for anyone who needs it. Perfect for a short stay!", image: "/images/bottled_soap.jpg" }, { id: 2, category: "utensils", title: "Cooking Utensils", description: "Set of utensils including spatula, ladle, and tongs. Used but in good condition.", image: "/images/cooking_utensils.jpg" } ]; const filteredPosts = posts.filter((post)=>{ const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) || post.description.toLowerCase().includes(searchTerm.toLowerCase()); const matchesFilter = filter ? post.category === filter : true; return matchesSearch && matchesFilter; }); return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-gradient-to-b from-green-400 to-blue-500", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-white", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Student Marketplace")), /*#__PURE__*/ React.createElement("div", { className: "max-w-xs mx-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search for items...", className: "w-full p-2 mb-4 border rounded", name: "search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap space-x-2 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 p-2 border rounded mb-2 ${filter === "self-care" ? "bg-gray-400" : "bg-gray-200"}`, name: "self-care", onClick: ()=>setFilter("self-care"), __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Self-care"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 p-2 border rounded mb-2 ${filter === "utensils" ? "bg-gray-400" : "bg-gray-200"}`, name: "utensils", onClick: ()=>setFilter("utensils"), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Utensils"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 p-2 border rounded mb-2 ${filter === "technology" ? "bg-gray-400" : "bg-gray-200"}`, name: "technology", onClick: ()=>setFilter("technology"), __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Technology"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 p-2 border rounded mb-2 ${filter === "clothes" ? "bg-gray-400" : "bg-gray-200"}`, name: "clothes", onClick: ()=>setFilter("clothes"), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Clothes"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 p-2 border rounded mb-2 ${filter === "food" ? "bg-gray-400" : "bg-gray-200"}`, name: "food", onClick: ()=>setFilter("food"), __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Food")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, filteredPosts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "border rounded p-4 flex flex-col items-center bg-white", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image, alt: `Image of ${post.title}`, className: "w-[100px] h-[100px] mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, post.description))))), /*#__PURE__*/ React.createElement("footer", { className: "max-w-xs mx-auto mt-8 bg-white p-4 border rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Contact Information"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Email us at: ", /*#__PURE__*/ React.createElement("a", { href: "mailto:info@summermarketplace.com", className: "text-blue-500", __source: { fileName: "", lineNumber: 82, columnNumber: 49 }, __self: this }, "info@summermarketplace.com")))); }