62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T4fbc,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface FilterProduct { id: string; title: string; category: string; price: number; compareAtPrice?: number; rating: number; colors: string[]; inStock: boolean; image?: string; } export interface ProductFiltersSidebarProps { products?: FilterProduct[]; currency?: string; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", card: "#141414", photo: "#F1F1F1", chip: "rgba(255,255,255,0.08)", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", sale: "#FF6B57", track: "rgba(255,255,255,0.12)", ring: "rgba(255,255,255,0.5)" }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", card: "#F7F7F6", photo: "#F1F1F1", chip: "rgba(0,0,0,0.06)", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", sale: "#D9480F", track: "rgba(0,0,0,0.1)", ring: "rgba(0,0,0,0.45)" }, }; const COLOR_HEX: Record = { Black: "#1A1A1A", White: "#F4F4F2", Silver: "#C9CBCF", Olive: "#5E6B4E", Stone: "#D8D3CB", Navy: "#26324F" }; const F = (id: string, title: string, category: string, price: number, rating: number, colors: string[], inStock: boolean, image: string, compareAtPrice?: number): FilterProduct => ({ id, title, category, price, rating, colors, inStock, image, compareAtPrice }); const PRODUCTS: FilterProduct[] = [ F("p1", "Wireless Earbuds", "Audio", 129, 4.8, ["Black", "Stone"], true, "/demo/wireless-earbuds.webp"), F("p2", "Noise Cancelling Headphones", "Audio", 199, 4.7, ["Black", "Silver"], true, "/demo/blocks/product-list/headphones.webp"), F("p3", "Minimal Watch", "Accessories", 79, 4.9, ["Black", "Silver", "Olive"], true, "/demo/minimal-watch.webp", 129), F("p4", "Running Shoes", "Sport", 99, 4.6, ["White", "Black"], true, "/demo/running-shoes.webp", 149), F("p5", "Insulated Water Bottle", "Sport", 39, 4.8, ["Black", "Olive", "Navy"], true, "/demo/insulated-water-bottle.webp"), F("p6", "Laptop Stand", "Desk", 49, 4.8, ["Black", "Silver"], true, "/demo/laptop-stand.webp", 89), F("p7", "LED Desk Lamp", "Desk", 59, 4.5, ["Black", "White"], false, "/demo/blocks/product-list/lamp.webp"), F("p8", "Premium Notebook", "Desk", 24, 4.8, ["Black", "Navy"], true, "/demo/notebook.webp"), F("p9", "Everyday Backpack", "Accessories", 89, 4.7, ["Black", "Olive"], true, "/demo/blocks/product-list/backpack.webp"), F("p10", "Studio Earbuds", "Audio", 89, 4.3, ["White"], false, "/demo/wireless-earbuds.webp", 109), F("p11", "Trail Bottle 1L", "Sport", 45, 4.4, ["Olive"], true, "/demo/insulated-water-bottle.webp"), F("p12", "Field Watch", "Accessories", 119, 4.6, ["Olive", "Black"], true, "/demo/minimal-watch.webp"), ]; const SORTS = { featured: "Featured", "price-asc": "Price: low to high", "price-desc": "Price: high to low", rating: "Top rated" } as const; export function ProductFiltersSidebar({ products = PRODUCTS, currency = "$", theme = "dark", className }: ProductFiltersSidebarProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const maxP = Math.ceil(Math.max(...products.map((x) => x.price)) / 10) * 10; const [cats, setCats] = React.useState([]); const [colors, setColors] = React.useState([]); const [range, setRange] = React.useState<[number, number]>([0, maxP]); const [minRating, setMinRating] = React.useState(0); const [stockOnly, setStockOnly] = React.useState(false); const [saleOnly, setSaleOnly] = React.useState(false); const [sort, setSort] = React.useState("featured"); const [openGroups, setOpenGroups] = React.useState>({ category: true, price: true, color: true, rating: true }); const [mobileOpen, setMobileOpen] = React.useState(false); const categories = Array.from(new Set(products.map((x) => x.category))); const allColors = Array.from(new Set(products.flatMap((x) => x.colors))); const matches = (x: FilterProduct, skip?: string) => (skip === "cat" || !cats.length || cats.includes(x.category)) && (skip === "color" || !colors.length || x.colors.some((c) => colors.includes(c))) && x.price >= range[0] && x.price <= range[1] && x.rating >= minRating && (!stockOnly || x.inStock) && (!saleOnly || !!x.compareAtPrice); const results = products .filter((x) => matches(x)) .sort((a, b) => (sort === "price-asc" ? a.price - b.price : sort === "price-desc" ? b.price - a.price : sort === "rating" ? b.rating - a.rating : 0)); const buckets = Array.from({ length: 10 }, (_, i) => products.filter((x) => x.price >= (i * maxP) / 10 && x.price < ((i + 1) * maxP) / 10 + (i === 9 ? 1 : 0)).length); const maxBucket = Math.max(...buckets, 1); const chips = [ ...cats.map((c) => ({ key: `c-${c}`, label: c, clear: () => setCats((s) => s.filter((x) => x !== c)) })), ...colors.map((c) => ({ key: `k-${c}`, label: c, clear: () => setColors((s) => s.filter((x) => x !== c)) })), ...(range[0] > 0 || range[1] < maxP ? [{ key: "price", label: `${currency}${range[0]}–${currency}${range[1]}`, clear: () => setRange([0, maxP]) }] : []), ...(minRating ? [{ key: "rating", label: `${minRating}★ & up`, clear: () => setMinRating(0) }] : []), ...(stockOnly ? [{ key: "stock", label: "In stock", clear: () => setStockOnly(false) }] : []), ...(saleOnly ? [{ key: "sale", label: "On sale", clear: () => setSaleOnly(false) }] : []), ]; const clearAll = () => { setCats([]); setColors([]); setRange([0, maxP]); setMinRating(0); setStockOnly(false); setSaleOnly(false); }; const toggle = (list: string[], set: (v: string[]) => void, v: string) => set(list.includes(v) ? list.filter((x) => x !== v) : [...list, v]); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const group = (id: string, title: string, children: React.ReactNode) => (

{openGroups[id] && (

{children}

)}

); const sidebar = (

{group( "category", "Category",

toggle(cats, setCats, c)} className="h-4 w-4 cursor-pointer" style={{ accentColor: p.title }} /> {c} {n}

, )} {group( "price", "Price",

{[0, 1].map((k) => ( { const v = Number(e.target.value); setRange((r) => (k === 0 ? [Math.min(v, r[1] - 10), r[1]] : [r[0], Math.max(v, r[0] + 10)])); }} className="pf-range pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent" style={{ ["--thumb" as string]: p.title, ["--thumb-ring" as string]: p.bg }} /> ))}

{currency} {range[0]} {currency} {range[1]}

, )} {group( "color", "Color",

{allColors.map((c) => { const on = colors.includes(c); return ( ); })}

, )} {group( "rating", "Rating",

{[4.5, 4, 0].map((r) => ( setMinRating(r)} className="h-4 w-4 cursor-pointer" style={{ accentColor: p.title }} /> {r ? `${r} ★ & up` : "Any rating"} ))}

, )}

{[ { label: "In stock only", on: stockOnly, set: setStockOnly }, { label: "On sale", on: saleOnly, set: setSaleOnly }, ].map((s) => (

))}

); return (

All products

{results.length} of {products.length} products

Sort by

{chips.length > 0 && (

{chips.map((c) => ( {c.label} ))}

)} {results.length ? (

{/* eslint-disable-next-line @next/next/no-img-element */} {x.image && {x.title}

} {x.compareAtPrice && ( Sale )} {!x.inStock && Sold out}

{x.title}

{currency} {x.price} {x.compareAtPrice && ( {currency} {x.compareAtPrice} )} {x.colors.length > 1 && `+${x.colors.length - 1}`}

) : (

No products match these filters

)}

); } export default ProductFiltersSidebar; 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/product-filters-sidebar/product-filters-sidebar.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]