added filter to category page

src/components/BrandsSidebar/index.jsx

@@ -1,38 +1,18 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { Drawer, Input, Checkbox } from "antd";
 import styles from "./BrandsSidebar.module.scss";
 import { useTranslation } from "react-i18next";
 import brand from "../../assets/icons/brand.svg";
 
-const Sidebar = () => {
+const BrandSidebar = ({ 
+  brands = [], 
+  selectedBrand = null,
+  onBrandSelect,
+  onBrandDeselect 
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const { t, i18n } = useTranslation();
-  const brands = [
-    "Abat",
-    "Altın",
-    "Arçalyk",
-    "Aýaz baba",
-    "Balşeker",
-    "Bars",
-    "Belet Film",
-    "Beýlekiler / Другие",
-    "Bingo",
-    "Bold",
-    "Carte Noire",
-    "Çaykur",
-    "Dabara",
-    "Datmeni",
-    "Elin",
-    "Emin Et",
-    "Enemeli",
-    "Ermak",
-    "Eyfel",
-    "Familia",
-    "Farmasi",
-    "Ferrero Rocher",
-    "Granum",
-  ];
+  const { t } = useTranslation();
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -42,15 +22,28 @@ const Sidebar = () => {
     setSearchTerm(e.target.value.toLowerCase());
   };
 
-  const filteredBrands = brands.filter((brand) =>
-    brand.toLowerCase().includes(searchTerm)
-  );
+  const filteredBrands = useMemo(() => {
+    if (!brands || brands.length === 0) return [];
+    
+    return brands.filter((brand) =>
+      brand.name.toLowerCase().includes(searchTerm)
+    );
+  }, [brands, searchTerm]);
+
+  const handleBrandChange = (brandId, checked) => {
+    if (checked) {
+      onBrandSelect?.(brandId);
+    } else {
+      onBrandDeselect?.();
+    }
+  };
 
   return (
     <div className={styles.sidebarContainer}>
       <button onClick={handleToggle} className={styles.mobileNavButton}>
         <img src={brand} alt="" />
         {t("navbar.brands")}
+        {selectedBrand && <span className={styles.badge}>1</span>}
       </button>
 
       <Drawer
@@ -67,16 +60,30 @@ const Sidebar = () => {
           onChange={handleSearch}
           className={styles.searchInput}
         />
-        <div className={styles.brandsList}>
-          {filteredBrands.map((brand, index) => (
-            <div key={index} className={styles.brandItem}>
-              <Checkbox>{brand}</Checkbox>
-            </div>
-          ))}
-        </div>
+        
+        {filteredBrands.length > 0 ? (
+          <div className={styles.brandsList}>
+            {filteredBrands.map((brand) => (
+              <div key={brand.id} className={styles.brandItem}>
+                <Checkbox
+                  checked={selectedBrand === brand.id}
+                  onChange={(e) => handleBrandChange(brand.id, e.target.checked)}
+                >
+                  {brand.name}
+                </Checkbox>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className={styles.emptyState}>
+            {brands.length === 0 
+              ? t("common.noData") 
+              : t("common.noResults")}
+          </div>
+        )}
       </Drawer>
     </div>
   );
 };
 
-export default Sidebar;
+export default BrandSidebar;