61: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"] 62: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"] 63:T73a8,'use client' import * as React from 'react' import { Check, ChevronLeft, ChevronRight, Heart, RotateCcw, ShoppingBag, SlidersHorizontal, Star, X, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb' import { Button } from '@/components/ui/button' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Separator } from '@/components/ui/separator' import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet' import { CATEGORIES, COLORS, ProductFilterSidebar } from './ProductFilterSidebar' interface ProductColor { id: string name: string class: string colorCode: string } interface Product { id: string name: string brand: string category: string categoryId: string price: number originalPrice?: number rating: number reviewCount: number badge?: { label: string variant: 'default' | 'secondary' | 'destructive' | 'outline' } image: string colors: ProductColor[] createdAt: number featuredRank: number } export interface ProductGridPageProps extends React.HTMLAttributes {} const PRODUCTS: Product[] = [ { id: 'prod-1', name: 'XT-6 GORE-TEX Trail Running Shoe', brand: 'Salomon', category: 'Running', categoryId: 'running', price: 220, originalPrice: 245, rating: 4.9, reviewCount: 128, badge: { label: 'Best Seller', variant: 'default' }, image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c1', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c2', name: 'Sage', class: 'bg-chart-2', colorCode: 'sage' }, { id: 'c3', name: 'Navy', class: 'bg-slate-900', colorCode: 'navy' }, ], createdAt: 1708000000000, featuredRank: 1, }, { id: 'prod-2', name: 'Air Max Pulse Premium', brand: 'Nike', category: 'Sneakers', categoryId: 'sneakers', price: 150, originalPrice: 180, rating: 4.8, reviewCount: 94, badge: { label: '-20% OFF', variant: 'destructive' }, image: 'https://images.unsplash.com/photo-1552346154-21d32810aba3?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c4', name: 'White', class: 'bg-zinc-100 dark:bg-zinc-200 border border-zinc-300', colorCode: 'white' }, { id: 'c5', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c6', name: 'Amber', class: 'bg-warning', colorCode: 'amber' }, ], createdAt: 1708500000000, featuredRank: 2, }, { id: 'prod-3', name: '990v6 Made in USA Core Sneaker', brand: 'New Balance', category: 'Sneakers', categoryId: 'sneakers', price: 200, rating: 4.9, reviewCount: 215, badge: { label: 'New', variant: 'secondary' }, image: 'https://images.unsplash.com/photo-1539185441755-769473a23570?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c7', name: 'Sage', class: 'bg-chart-2', colorCode: 'sage' }, { id: 'c8', name: 'White', class: 'bg-zinc-100 dark:bg-zinc-200 border border-zinc-300', colorCode: 'white' }, { id: 'c9', name: 'Navy', class: 'bg-slate-900', colorCode: 'navy' }, ], createdAt: 1709000000000, featuredRank: 3, }, { id: 'prod-4', name: 'Ultraboost Light Performance Runner', brand: 'Adidas', category: 'Running', categoryId: 'running', price: 190, originalPrice: 210, rating: 4.7, reviewCount: 86, image: 'https://images.unsplash.com/photo-1587563871167-1ee9c731aefb?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c10', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c11', name: 'White', class: 'bg-zinc-100 dark:bg-zinc-200 border border-zinc-300', colorCode: 'white' }, ], createdAt: 1707000000000, featuredRank: 4, }, { id: 'prod-5', name: 'Tor Ultra Hi Waterproof Boot', brand: 'Salomon', category: 'Boots', categoryId: 'boots', price: 260, rating: 4.8, reviewCount: 62, badge: { label: 'Trending', variant: 'outline' }, image: 'https://images.unsplash.com/photo-1608231387042-66d1773070a5?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c12', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c13', name: 'Amber', class: 'bg-warning', colorCode: 'amber' }, ], createdAt: 1708800000000, featuredRank: 5, }, { id: 'prod-6', name: 'Penny Lug Leather Loafer', brand: 'Adidas', category: 'Loafers', categoryId: 'loafers', price: 160, originalPrice: 190, rating: 4.5, reviewCount: 41, badge: { label: 'Sale', variant: 'destructive' }, image: 'https://images.unsplash.com/photo-1533867617858-e7b97e060509?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c14', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c15', name: 'Navy', class: 'bg-slate-900', colorCode: 'navy' }, ], createdAt: 1706000000000, featuredRank: 6, }, { id: 'prod-7', name: 'Fresh Foam X Trail 574 v2', brand: 'New Balance', category: 'Running', categoryId: 'running', price: 135, originalPrice: 155, rating: 4.6, reviewCount: 78, image: 'https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c16', name: 'Sage', class: 'bg-chart-2', colorCode: 'sage' }, { id: 'c17', name: 'Amber', class: 'bg-warning', colorCode: 'amber' }, { id: 'c18', name: 'White', class: 'bg-zinc-100 dark:bg-zinc-200 border border-zinc-300', colorCode: 'white' }, ], createdAt: 1707500000000, featuredRank: 7, }, { id: 'prod-8', name: 'Tech Fleece Runner Low Boot', brand: 'Nike', category: 'Boots', categoryId: 'boots', price: 185, rating: 4.7, reviewCount: 53, badge: { label: 'New', variant: 'secondary' }, image: 'https://images.unsplash.com/photo-1514989940723-e8e51635b782?w=700&auto=format&fit=crop&q=80', colors: [ { id: 'c19', name: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900', colorCode: 'black' }, { id: 'c20', name: 'Navy', class: 'bg-slate-900', colorCode: 'navy' }, { id: 'c21', name: 'Sage', class: 'bg-chart-2', colorCode: 'sage' }, ], createdAt: 1708900000000, featuredRank: 8, }, ] export function ProductGridPage({ className, ...props }: ProductGridPageProps) { const [selectedCategories, setSelectedCategories] = React.useState([]) const [priceRange, setPriceRange] = React.useState([50, 300]) const [selectedColors, setSelectedColors] = React.useState([]) const [selectedBrands, setSelectedBrands] = React.useState([]) const [minRating, setMinRating] = React.useState(0) const [sortBy, setSortBy] = React.useState('featured') const [wishlistIds, setWishlistIds] = React.useState>(new Set(['prod-1', 'prod-5'])) const [addedToCartIds, setAddedToCartIds] = React.useState>(new Set()) const [activeProductColors, setActiveProductColors] = React.useState>({}) const [page, setPage] = React.useState(1) const [isMobileFilterOpen, setIsMobileFilterOpen] = React.useState(false) const totalPages = 3 const toggleCategory = (id: string, checked: boolean) => { setSelectedCategories((prev) => (checked ? [...prev, id] : prev.filter((item) => item !== id))) setPage(1) } const toggleBrand = (id: string, checked: boolean) => { setSelectedBrands((prev) => (checked ? [...prev, id] : prev.filter((item) => item !== id))) setPage(1) } const toggleColor = (id: string) => { setSelectedColors((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])) setPage(1) } const setRating = (val: number) => { setMinRating((prev) => (prev === val ? 0 : val)) setPage(1) } const toggleWishlist = (id: string) => { setWishlistIds((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } const addToCart = (id: string) => { setAddedToCartIds((prev) => { const next = new Set(prev) next.add(id) return next }) setTimeout(() => { setAddedToCartIds((prev) => { const next = new Set(prev) next.delete(id) return next }) }, 1600) } const selectProductColor = (productId: string, colorCode: string) => { setActiveProductColors((prev) => ({ ...prev, [productId]: colorCode, })) } const resetFilters = () => { setSelectedCategories([]) setPriceRange([50, 300]) setSelectedColors([]) setSelectedBrands([]) setMinRating(0) setPage(1) } const hasActiveFilters = selectedCategories.length > 0 || selectedBrands.length > 0 || selectedColors.length > 0 || minRating > 0 || priceRange[0] > 50 || priceRange[1] < 300 const activeFilterCount = selectedCategories.length + selectedBrands.length + selectedColors.length + (minRating > 0 ? 1 : 0) + (priceRange[0] > 50 || priceRange[1] < 300 ? 1 : 0) const getCategoryCount = (catId: string) => PRODUCTS.filter((p) => p.categoryId === catId).length const getBrandCount = (brand: string) => PRODUCTS.filter((p) => p.brand === brand).length const filteredProducts = React.useMemo(() => { return PRODUCTS.filter((product) => { if (selectedCategories.length > 0 && !selectedCategories.includes(product.categoryId)) { return false } if (product.price < priceRange[0] || product.price > priceRange[1]) { return false } if (selectedColors.length > 0) { const hasMatchingColor = product.colors.some((c) => selectedColors.includes(c.colorCode)) if (!hasMatchingColor) return false } if (selectedBrands.length > 0 && !selectedBrands.includes(product.brand)) { return false } if (minRating > 0 && product.rating < minRating) { return false } return true }).sort((a, b) => { if (sortBy === 'price-asc') return a.price - b.price if (sortBy === 'price-desc') return b.price - a.price if (sortBy === 'rating-desc') return b.rating - a.rating if (sortBy === 'newest') return b.createdAt - a.createdAt return a.featuredRank - b.featuredRank }) }, [selectedCategories, priceRange, selectedColors, selectedBrands, minRating, sortBy]) const filterSidebarProps = { selectedCategories, priceRange, selectedColors, selectedBrands, minRating, onToggleCategory: toggleCategory, onPriceRangeChange: (val: number[]) => setPriceRange(val), onToggleColor: toggleColor, onToggleBrand: toggleBrand, onSelectRating: setRating, getCategoryCount, getBrandCount, } return (

{/* Breadcrumb */} Home Shop Footwear {/* Header & Toolbar */}

All Footwear

{filteredProducts.length} items

Engineered for performance, trail endurance, and everyday urban utility.

{/* Mobile Filter Drawer */}

Filters {hasActiveFilters && ( )}

Narrow down footwear by category, price, and specs.

{/* Sort Select */}

Sort by:

{/* 2-Column Main Layout */}

{/* Left Desktop Sidebar */} {/* Right Product Grid Area */}

{/* Active Filter Chips */} {hasActiveFilters && (

{selectedCategories.map((catId) => ( Category: {CATEGORIES.find((c) => c.id === catId)?.label} ))} {selectedBrands.map((brand) => ( Brand: {brand} ))} {selectedColors.map((colorId) => ( Color: {COLORS.find((c) => c.id === colorId)?.label} ))} {minRating > 0 && ( Rating: {minRating}+ Stars )} {(priceRange[0] > 50 || priceRange[1] < 300) && ( Price: ${priceRange[0]} - ${priceRange[1]} )}

)} {/* Empty State */} {filteredProducts.length === 0 ? (

No matching footwear found

Try adjusting your price range, clearing selected colors, or resetting your filters to see more results.

) : ( /* 3-Column Product Grid */

{filteredProducts.map((product) => (

{/* Image Aspect Square Container */}

{/* Top Left Badge */} {product.badge && (

{product.badge.label}

)} {/* Top Right Wishlist Heart */} {/* Quick Add Button (Visible on hover & focus) */}

{/* Card Body */}

{/* Color swatches preview */}

{product.colors.map((color) => ( ))} {product.colors.length} {product.colors.length === 1 ? 'color' : 'colors'}

{/* Brand & Category */}

{product.brand} · {product.category}

{product.rating} ({product.reviewCount})

{/* Title */}

{product.name}

{/* Price Row */}

${product.price.toFixed(2)} {product.originalPrice && ( ${product.originalPrice.toFixed(2)} )} {product.originalPrice && ( Save ${(product.originalPrice - product.price).toFixed(2)} )}

))}

)} {/* Pagination Footer */} {filteredProducts.length > 0 && ( )}

) } 64:T1cc9,'use client' import * as React from 'react' import { Check, Star } from 'lucide-react' import { cn } from '@/lib/utils' import { Checkbox } from '@/components/ui/checkbox' import { Separator } from '@/components/ui/separator' import { Slider } from '@/components/ui/slider' export interface CategoryOption { id: string label: string } export interface BrandOption { id: string label: string } export interface ColorOption { id: string label: string class: string } export const CATEGORIES: CategoryOption[] = [ { id: 'sneakers', label: 'Sneakers' }, { id: 'running', label: 'Running' }, { id: 'boots', label: 'Boots' }, { id: 'loafers', label: 'Loafers' }, ] export const BRANDS: BrandOption[] = [ { id: 'Nike', label: 'Nike' }, { id: 'Adidas', label: 'Adidas' }, { id: 'New Balance', label: 'New Balance' }, { id: 'Salomon', label: 'Salomon' }, ] export const COLORS: ColorOption[] = [ { id: 'black', label: 'Black', class: 'bg-zinc-950 dark:bg-zinc-900 border-zinc-800' }, { id: 'white', label: 'White', class: 'bg-zinc-100 dark:bg-zinc-200 border-zinc-300' }, { id: 'sage', label: 'Sage', class: 'bg-chart-2 border-chart-2' }, { id: 'navy', label: 'Navy', class: 'bg-slate-900 border-slate-800' }, { id: 'amber', label: 'Amber', class: 'bg-warning border-warning' }, ] export const RATING_OPTIONS = [ { value: 4.8, label: '4.8 stars & above' }, { value: 4.5, label: '4.5 stars & above' }, { value: 4.0, label: '4.0 stars & above' }, ] export interface ProductFilterSidebarProps { idPrefix?: string selectedCategories: string[] priceRange: number[] selectedColors: string[] selectedBrands: string[] minRating: number onToggleCategory: (id: string, checked: boolean) => void onPriceRangeChange: (value: number[]) => void onToggleColor: (id: string) => void onToggleBrand: (id: string, checked: boolean) => void onSelectRating: (value: number) => void getCategoryCount: (id: string) => number getBrandCount: (brand: string) => number } export function ProductFilterSidebar({ idPrefix = '', selectedCategories, priceRange, selectedColors, selectedBrands, minRating, onToggleCategory, onPriceRangeChange, onToggleColor, onToggleBrand, onSelectRating, getCategoryCount, getBrandCount, }: ProductFilterSidebarProps) { return (

{/* Categories */}

Price Range

${priceRange[0]} – ${priceRange[1]}

onPriceRangeChange(val)} min={50} max={300} step={5} range className="py-2" />

$50 $300

{/* Colors */}

Color

{COLORS.map((color) => ( ))}

{/* Brands */}

Brand

{BRANDS.map((b) => (

onToggleBrand(b.id, checked === true)} /> {b.label} {getBrandCount(b.id)}

))}

{/* Rating */}

Customer Rating

{RATING_OPTIONS.map((opt) => ( ))}

) } 60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/breadcrumb.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/checkbox.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/separator.json","https://uipkge.dev/r/react/sheet.json","https://uipkge.dev/r/react/slider.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/product-grid-page/ProductGridPage.tsx","content":"$63","type":"registry:page","target":"~/components/blocks/ProductGridPage.tsx"},{"path":"packages/registry-react/blocks/product-grid-page/ProductFilterSidebar.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/ProductFilterSidebar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]