function MainComponent() { const [categories, setCategories] = React.useState([]); const [selectedCategory, setSelectedCategory] = React.useState(""); const [products, setProducts] = React.useState([]); const [isJointManagement, setIsJointManagement] = React.useState(false); const handleCategoryChange = (event)=>{ setSelectedCategory(event.target.value); const filteredProducts = products.filter((product)=>selectedCategory === "" || product.categoryId === selectedCategory); setProducts(filteredProducts); }; const handleJointManagementChange = (event)=>{ setIsJointManagement(event.target.checked); }; const loadProducts = async ()=>{ // Logic to load products from the backend/database }; React.useEffect(()=>{ // Logic to load categories from the backend/database }, []); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-5", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-wrap justify-between items-center mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#121212]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Global Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "joint-management", onChange: handleJointManagementChange, checked: isJointManagement, className: "mr-2", id: "joint-management", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "joint-management", className: "font-medium text-[#121212]", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Joint Management")), /*#__PURE__*/ React.createElement("select", { name: "category", onChange: handleCategoryChange, value: selectedCategory, className: "p-2 border border-gray-300 rounded text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "All Categories"), categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category.id, value: category.id, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "border p-4 rounded-lg bg-white", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Product image of ${product.name}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg text-[#121212]", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Category: ", product.categoryName), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, product.price), isJointManagement && /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "Manage")))))); }