support for filtering and updating caliber

components/parts/Filters.tsx

@@ -8,7 +8,9 @@ export default function Filters(props: {
   availableBrands: string[];
   brandFilter: string[];
   setBrandFilter: (v: string[]) => void;
-
+  availableCalibers: string[];
+  caliberFilter: string[];
+  setCaliberFilter: (next: string[]) => void;
   priceBounds: { min: number | null; max: number | null };
   priceRange: { min: number | null; max: number | null };
   setPriceRange: (v: { min: number | null; max: number | null }) => void;
@@ -20,6 +22,9 @@ export default function Filters(props: {
     availableBrands,
     brandFilter,
     setBrandFilter,
+    availableCalibers,
+    caliberFilter,  
+    setCaliberFilter,
     priceBounds,
     priceRange,
     setPriceRange,
@@ -88,7 +93,10 @@ export default function Filters(props: {
                 onChange={(e) => {
                   const value = Number(e.target.value);
                   setPriceRange({
-                    min: Math.min(value, priceRange.max ?? priceBounds.max ?? value),
+                    min: Math.min(
+                      value,
+                      priceRange.max ?? priceBounds.max ?? value
+                    ),
                     max: priceRange.max ?? priceBounds.max ?? value,
                   });
                 }}
@@ -104,7 +112,10 @@ export default function Filters(props: {
                   const value = Number(e.target.value);
                   setPriceRange({
                     min: priceRange.min ?? priceBounds.min ?? value,
-                    max: Math.max(value, priceRange.min ?? priceBounds.min ?? value),
+                    max: Math.max(
+                      value,
+                      priceRange.min ?? priceBounds.min ?? value
+                    ),
                   });
                 }}
                 className="w-full"
@@ -168,6 +179,38 @@ export default function Filters(props: {
         )}
       </div>
 
+      {availableCalibers?.length > 0 && (
+        <div className="mt-4">
+          <div className="mb-2 text-xs font-semibold tracking-wide text-zinc-300">
+            Caliber
+          </div>
+
+          <div className="space-y-2">
+            {availableCalibers.map((c) => {
+              const checked = caliberFilter.includes(c);
+              return (
+                <label
+                  key={c}
+                  className="flex items-center gap-2 text-sm text-zinc-300"
+                >
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={(e) => {
+                      if (e.target.checked)
+                        setCaliberFilter([...caliberFilter, c]);
+                      else
+                        setCaliberFilter(caliberFilter.filter((x) => x !== c));
+                    }}
+                  />
+                  <span>{c}</span>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
       {/* In-stock toggle */}
       <div className="border-t border-zinc-800 pt-3">
         <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
@@ -187,4 +230,4 @@ export default function Filters(props: {
       </div>
     </aside>
   );
-}
+}