filter

components/backAnimatsiya/backAnimatsiya.tsx

@@ -2,7 +2,7 @@ import "./back.css";
 
 export default function BackAnimatsiya() {
   return (
-    <div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-100">
+    <div className="fixed inset-0 w-full h-full flex items-center justify-center pointer-events-none z-0 opacity-50">
       <svg
         id="Layer_2"
         xmlns="http://www.w3.org/2000/svg"

components/pages/products/filter.tsx

@@ -0,0 +1,129 @@
+"use client";
+import { useFilter } from "@/lib/filter-zustand";
+import { Check } from "lucide-react";
+import { useState } from "react";
+
+export default function Filter() {
+  const filter = useFilter((state) => state.filter);
+  const toggleFilter = useFilter((state) => state.toggleFilter);
+  const hasData = useFilter((state) => state.hasFilter);
+  
+  const [dataExpanded, setDataExpanded] = useState<boolean>(false);
+  const [numberExpanded, setNumberExpanded] = useState<boolean>(false);
+
+  const sectionData = [
+    "SLT-Aqua",
+    "Вварное седло",
+    "Кран шаровый",
+    "Муфты",
+    "Муфты комбинированные",
+    "Муфты переходные",
+    "Тройник комбинированный",
+    "Тройники",
+    "Трубы SDR 6",
+    "Трубы SDR 7,4",
+    "Угол 45",
+    "Угол 90",
+    "Угольник комбинированный",
+    "Фланцы+бурты",
+  ];
+
+  const sectionNumber = [
+    "25", '25х1/2"', '25х3/4"', "32", "32x25x25", "32x25x32",
+    '32х1"', '32х1/2"', "32х25", '32х3/4"', "40", "40x25x40",
+    "40x32x40", '40х1 1/4"', '40х1 3/4"', '40х1/2"', "40х25",
+    "40х32", "50", "50x25x50", "50x32x50", "50x40x50",
+    '50х1 1/2"', '50х1/2"', "50х25", "50х32", "50х40", "63",
+    "63x25x63", "63x32x63", "63x40x63", "63x50x63", '63х1/2"',
+    '63х2"', "63х25", "63х32", "63х40", "63х50", "75",
+    "75x25x75", "75x32x75", "75x40x75", "75x50x75", "75x63x75",
+    '75х1/2"', "75х32", "75х40", "75х50", "75х63", "90",
+    "90x40x90", "90x50x90", "90x63x90", "90x75x90", '90х1/2"',
+    "90х32", "90х40", "90х50", "90х63", "90х75", "110",
+    "110x50x110", "110x63x110", "110x75x110", "110x90x110",
+    '110х1/2"', "110х25", "110х32", "110х40", "110х50",
+    "110х63", "110х75", "110х90", "125", "160",
+  ];
+
+  // Bo'lim uchun ko'rsatiladigan itemlar
+  const visibleSectionData = dataExpanded ? sectionData : sectionData.slice(0, 5);
+  
+  // O'lcham uchun ko'rsatiladigan itemlar
+  const visibleSectionNumber = numberExpanded ? sectionNumber : sectionNumber.slice(0, 10);
+
+  return (
+    <div className="space-y-3 max-w-70 w-full text-white">
+      {/* Bo'lim filtri */}
+      <div className="bg-gray-500 rounded-lg">
+        <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
+          Bo'lim
+        </p>
+        <div className="space-y-3 p-2">
+          {visibleSectionData.map((item) => (
+            <div
+              key={item}
+              onClick={() => toggleFilter(item)}
+              className="hover:cursor-pointer flex items-center gap-2"
+            >
+              <span
+                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
+                  hasData(item)
+                    ? "border-red-600 bg-red-600"
+                    : "border-gray-400 bg-transparent"
+                }`}
+                aria-label="Filter checkbox"
+              >
+                {hasData(item) && (
+                  <Check className="h-3 w-3 text-white" strokeWidth={3} />
+                )}
+              </span>
+              <p>{item}</p>
+            </div>
+          ))}
+        </div>
+        <button
+          className="p-2 text-lg underline hover:text-red-300 transition"
+          onClick={() => setDataExpanded(!dataExpanded)}
+        >
+          {dataExpanded ? "Yashirish" : "Ko'proq ko'rish"}
+        </button>
+      </div>
+
+      {/* O'lcham filtri */}
+      <div className="bg-gray-500 rounded-lg">
+        <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
+          O'lcham
+        </p>
+        <div className="grid grid-cols-2 gap-3 p-2">
+          {visibleSectionNumber.map((item) => (
+            <div
+              key={item}
+              onClick={() => toggleFilter(item)}
+              className="hover:cursor-pointer flex items-center gap-2"
+            >
+              <span
+                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
+                  hasData(item)
+                    ? "border-red-600 bg-red-600"
+                    : "border-gray-400 bg-transparent"
+                }`}
+                aria-label="Filter checkbox"
+              >
+                {hasData(item) && (
+                  <Check className="h-3 w-3 text-white" strokeWidth={3} />
+                )}
+              </span>
+              <p>{item}</p>
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={() => setNumberExpanded(!numberExpanded)}
+          className="p-2 text-lg underline hover:text-red-300 transition"
+        >
+          {numberExpanded ? "Yashirish" : "Ko'proq ko'rish"}
+        </button>
+      </div>
+    </div>
+  );
+}

components/pages/products/filterInfo.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useFilter } from "@/lib/filter-zustand";
+import { X } from "lucide-react";
+
+export default function FilterInfo() {
+  const filtered = useFilter((state) => state.filter);
+  const resetFilter = useFilter((state) => state.resetFilter);
+  const togleFilter = useFilter((state) => state.toggleFilter);
+  if (filtered.length === 0) {
+    return null;
+  }
+  return (
+    <div className="fixed bottom-13 left-5 z-10 bg-gray-500 p-3 rounded-lg space-y-3 max-w-70 w-full">
+      <p className="text-white ">Found: 20</p>
+      <div className="flex gap-1 flex-wrap">
+        {filtered &&
+          filtered.map((item) => (
+            <div
+              key={item}
+              className="flex items-center gap-1 p-1 rounded-lg bg-gray-700 text-white text-sm "
+            >
+              <button onClick={() => togleFilter(item)}>
+                <X size={16} />
+              </button>
+              {item}
+            </div>
+          ))}
+      </div>
+      <button onClick={resetFilter} className="text-white underline ">
+        Clear all
+      </button>
+    </div>
+  );
+}

components/pages/products/products.tsx

@@ -1,22 +1,31 @@
+import Filter from "./filter";
+import FilterInfo from "./filterInfo";
 import ProductCard from "./productCard";
 
 export function Products() {
   return (
     <div className="bg-[#1e1d1c] py-20">
-      <div className="max-w-250 mx-auto w-full sm:-mt-50 -mt-30 z-20 relative">
-        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-          {Array(9)
-            .fill(null)
-            .map((_, index) => (
-              <ProductCard
-                key={index}
-                title="Elektr yong'in detektori-Ypres ver.2"
-                name="P-0834404"
-                image="/images/products/products.webp"
-                slug="P_0834404"
-                status="full"
-              />
-            ))}
+      <div className="max-w-300 mx-auto w-full z-20 relative">
+        <div className="flex items-start gap-5">
+          {/* filter part */}
+          <Filter/>
+
+          {/* main products */}
+          <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+            {Array(9)
+              .fill(null)
+              .map((_, index) => (
+                <ProductCard
+                  key={index}
+                  title="Elektr yong'in detektori-Ypres ver.2"
+                  name="P-0834404"
+                  image="/images/products/products.webp"
+                  slug="P_0834404"
+                  status="full"
+                />
+              ))}
+          </div>
+          <FilterInfo/>
         </div>
       </div>
     </div>