filter

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>