"use client"; import * as React from "react"; import * as SliderPrimitive from "@radix-ui/react-slider"; import { useState } from "react"; import { Check, ChevronDown, Filter, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; // Modified base slider component to show end circle interface SliderProps extends React.ComponentPropsWithoutRef { showEndCircle?: boolean; } const Slider = React.forwardRef< React.ElementRef, SliderProps >(({ className, showEndCircle = false, ...props }, ref) => ( {showEndCircle && ( )} )); Slider.displayName = SliderPrimitive.Root.displayName; // End Modified base slider component to show end circle interface HorizontalFiltersProps { className?: string; onFilterChange?: (filters: FilterState) => void; } interface FilterState { categories: string[]; priceRange: [number, number]; brands: string[]; colors: string[]; sizes: string[]; sortBy: string; } export default function HorizontalFilters({ className, onFilterChange, }: HorizontalFiltersProps) { const [filters, setFilters] = useState({ categories: [], priceRange: [0, 500], brands: [], colors: [], sizes: [], sortBy: "featured", }); const [activeFiltersCount, setActiveFiltersCount] = useState(0); const [showMobileFilters, setShowMobileFilters] = useState(false); const updateFilters = (newFilters: Partial) => { const updated = { ...filters, ...newFilters }; setFilters(updated); // Count active filters let count = 0; if (updated.categories.length) count += updated.categories.length; if (updated.brands.length) count += updated.brands.length; if (updated.colors.length) count += updated.colors.length; if (updated.sizes.length) count += updated.sizes.length; if (updated.priceRange[0] > 0 || updated.priceRange[1] < 500) count += 1; setActiveFiltersCount(count); onFilterChange?.(updated); }; const toggleFilter = (type: keyof FilterState, value: string) => { if (type === "sortBy") { updateFilters({ [type]: value } as Partial); return; } const currentValues = filters[type] as string[]; const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value]; updateFilters({ [type]: newValues } as Partial); }; const clearFilters = () => { setFilters({ categories: [], priceRange: [0, 500], brands: [], colors: [], sizes: [], sortBy: "featured", }); setActiveFiltersCount(0); onFilterChange?.({ categories: [], priceRange: [0, 500], brands: [], colors: [], sizes: [], sortBy: "featured", }); }; const categories = [ "Clothing", "Shoes", "Accessories", "Sportswear", "Outerwear", ]; const brands = ["Nike", "Adidas", "Puma", "Under Armour", "New Balance"]; const colors = [ { name: "Black", value: "#000000" }, { name: "White", value: "#FFFFFF" }, { name: "Red", value: "#FF0000" }, { name: "Blue", value: "#0000FF" }, { name: "Green", value: "#00FF00" }, { name: "Yellow", value: "#FFFF00" }, ]; const sizes = ["XS", "S", "M", "L", "XL", "XXL"]; const sortOptions = [ { label: "Featured", value: "featured" }, { label: "Price: Low to High", value: "price-asc" }, { label: "Price: High to Low", value: "price-desc" }, { label: "Newest", value: "newest" }, { label: "Best Selling", value: "best-selling" }, ]; const ActiveFilterBadges = () => { const activeFilters = [ ...filters.categories.map((cat) => ({ type: "categories", value: cat })), ...filters.brands.map((brand) => ({ type: "brands", value: brand })), ...filters.colors.map((color) => ({ type: "colors", value: color })), ...filters.sizes.map((size) => ({ type: "sizes", value: size })), ...(filters.priceRange[0] > 0 || filters.priceRange[1] < 500 ? [ { type: "price", value: `$${filters.priceRange[0]} - $${filters.priceRange[1]}`, }, ] : []), ]; if (activeFilters.length === 0) return null; return (

{activeFilters.map((filter, index) => ( {filter.value} ))} {activeFilters.length > 0 && ( )}

); }; return ( <> {/* Height set for example purpose only */}

{/* Category Filter */}

{categories.map((category) => (

))}

{/* Brand Filter */}

{brands.map((brand) => (

))}

{/* Price Range Filter */}

Price Range

updateFilters({ priceRange: value as [number, number] }) } showEndCircle />

${filters.priceRange[0]} ${filters.priceRange[1]}

{/* Size Filter */}

{sizes.map((size) => ( ))}

{/* Color Filter */}

{colors.map((color) => (

{color.name}

))}

{/* Mobile All Filters Button */}

{/* Sort By Dropdown */}

Sort by: {sortOptions.map((option) => ( toggleFilter("sortBy", option.value)} > {option.label} {filters.sortBy === option.value && ( )} ))}

{/* Active Filter Badges */} {/* Mobile Filters Overlay */} {showMobileFilters && (

Filters

{/* Categories */}

Brands

{brands.map((brand) => ( ))}

{/* Price Range */}

Price Range

updateFilters({ priceRange: value as [number, number], }) } />

${filters.priceRange[0]} ${filters.priceRange[1]}

{/* Sizes */}

Sizes

{sizes.map((size) => ( ))}

{/* Colors */}

Colors

{colors.map((color) => (

{color.name}

))}

)}

); }

Category Filters

Horizontal Filters

Filter DemoPreview

Filter DrawerPreview

Filter Demo
Preview

Filter Drawer
Preview