api attachment product list + filter

src/components/ProductCard.tsx

@@ -25,13 +25,37 @@ const ProductCard: FC<Props> = ({ item }) => {
             <h4 className='line-clamp-2 text-[#383E43] mt-4 sm:mt-6 text-xs sm:text-sm text-center leading-4 sm:leading-5 h-10 sm:h-12'>
                 {item.title_fa}
             </h4>
+            {/* <div className='flex flex-wrap justify-end items-center gap-1.5 mt-4'>
 
-            <div className='flex justify-end items-center gap-1.5 mt-4'>
-                <div className='size-2 rounded-full bg-red-500'></div>
-                <div className='size-2 rounded-full bg-red-500'></div>
-                <div className='size-2 rounded-full bg-red-500'></div>
+                {
+                    item.variants.map((variant) => {
+                        if (variant.meterage) {
+                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>{variant?.meterage?.value}</div>
+                        }
+
+                    })
+                }
             </div>
 
+            <div className='flex flex-wrap justify-end items-center gap-1.5 mt-4'>
+                {
+                    item.variants.map((variant) => {
+                        if (variant.color) {
+                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>
+                                <div className='size-2 rounded-full' style={{ backgroundColor: variant?.color?.value }}></div>
+                            </div>
+                        }
+                    })
+                }
+                {
+                    item.variants.map((variant) => {
+                        if (variant.size) {
+                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>{variant?.size?.value}</div>
+                        }
+                    })
+                }
+            </div> */}
+
             <div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
                 {NumberFormat(item.default_variant.price.selling_price)} تومان
             </div>

src/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }