"use client"; import { Checkbox } from "@/components/ui/checkbox"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; import { ChevronDown, CircleDollarSign, LucideIcon, Star, Tag, } from "lucide-react"; import { ReactNode, useState } from "react"; type PriceRange = { from: number; to: number }; const CollapsibleFilters = () => { return (

); }; const MIN_PRICE = 0; const MAX_PRICE = 1000; function PriceRangeFilter() { const [value, setValue] = useState({ from: MIN_PRICE, to: MAX_PRICE, }); const handleChange = (newValue: PriceRange) => { setValue(newValue); }; return (

handleChange({ from: +e.target.value, to: value.to }) } // onBlur={handleBlur} className="w-20" /> handleChange({ from: value.from, to: +e.target.value }) } // onBlur={handleBlur} className="w-20" />

handleChange({ from, to })} className="w-full mt-4 mb-3" /> ); } function RatingFilter() { const [rating, setRating] = useState(null); const [hoveredRating, setHoveredRating] = useState(null); return (

{[1, 2, 3, 4, 5].map((ratingValue) => ( = ratingValue : rating !== null && rating >= ratingValue ) ? "text-yellow-400 fill-yellow-400" : "text-gray-300" }`} onMouseEnter={() => setHoveredRating(ratingValue)} onMouseLeave={() => setHoveredRating(null)} onClick={() => setRating(ratingValue === rating ? null : ratingValue) } /> ))}

); } const categories = [ "Electronics", "Clothing", "Books", "Home & Garden", "Toys", ]; function CategoryFilter() { return ( {categories.map((category) => (

{category}

))} ); } const CollapsibleFilter = ({ title, icon: Icon, children, }: { title: string; icon?: LucideIcon; children: ReactNode; }) => (

{!!Icon && } {title}

{children} ); export default CollapsibleFilters;

Collapsible

Code Dialog

@peduarte starred 3 repositories

Code Dialog

Code Dialog

Code Dialog

Price Range

Category

Rating