{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-04",
  "title": "Filters Collapsible",
  "description": "A collapsible component for filter options",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "collapsible",
    "input",
    "label",
    "slider",
    "checkbox"
  ],
  "files": [
    {
      "path": "src/components/customized/collapsible/collapsible-04.tsx",
      "content": "\"use client\";\n\nimport {\n  ChevronDown,\n  CircleDollarSign,\n  type LucideIcon,\n  Star,\n  Tag,\n} from \"lucide-react\";\nimport { type ReactNode, useState } from \"react\";\nimport { Checkbox } from \"@/registry/ui/checkbox\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/ui/collapsible\";\nimport { Input } from \"@/registry/ui/input\";\nimport { Label } from \"@/registry/ui/label\";\nimport { Slider } from \"@/registry/ui/slider\";\n\ninterface PriceRange {\n  from: number;\n  to: number;\n}\n\nconst CollapsibleFilters = () => {\n  return (\n    <div className=\"w-full max-w-xs divide-y\">\n      <PriceRangeFilter />\n      <CategoryFilter />\n      <RatingFilter />\n    </div>\n  );\n};\n\nconst MIN_PRICE = 0;\nconst MAX_PRICE = 1000;\nfunction PriceRangeFilter() {\n  const [value, setValue] = useState<PriceRange>({\n    from: MIN_PRICE,\n    to: MAX_PRICE,\n  });\n\n  const handleChange = (newValue: PriceRange) => {\n    setValue(newValue);\n  };\n\n  return (\n    <CollapsibleFilter icon={CircleDollarSign} title=\"Price Range\">\n      <div className=\"flex justify-between space-x-4\">\n        <Input\n          className=\"w-20\"\n          onChange={(e) =>\n            handleChange({ from: +e.target.value, to: value.to })\n          }\n          type=\"number\"\n          // onBlur={handleBlur}\n          value={value.from}\n        />\n        <Input\n          className=\"w-20\"\n          onChange={(e) =>\n            handleChange({ from: value.from, to: +e.target.value })\n          }\n          type=\"number\"\n          // onBlur={handleBlur}\n          value={value.to}\n        />\n      </div>\n      <Slider\n        className=\"mt-4 mb-3 w-full\"\n        max={MAX_PRICE}\n        min={MIN_PRICE}\n        onValueChange={([from, to]) => handleChange({ from, to })}\n        step={10}\n        value={[value.from, value.to]}\n      />\n    </CollapsibleFilter>\n  );\n}\n\nfunction RatingFilter() {\n  const [rating, setRating] = useState<number | null>(null);\n  const [hoveredRating, setHoveredRating] = useState<number | null>(null);\n\n  return (\n    <CollapsibleFilter icon={Star} title=\"Rating\">\n      <div className=\"mb-1 flex space-x-1\">\n        {[1, 2, 3, 4, 5].map((ratingValue) => (\n          <Star\n            className={`h-6 w-6 cursor-pointer ${\n              (\n                hoveredRating !== null\n                  ? hoveredRating >= ratingValue\n                  : rating !== null && rating >= ratingValue\n              )\n                ? \"fill-yellow-400 text-yellow-400\"\n                : \"text-gray-300\"\n            }`}\n            key={ratingValue}\n            onClick={() =>\n              setRating(ratingValue === rating ? null : ratingValue)\n            }\n            onMouseEnter={() => setHoveredRating(ratingValue)}\n            onMouseLeave={() => setHoveredRating(null)}\n          />\n        ))}\n      </div>\n    </CollapsibleFilter>\n  );\n}\n\nconst categories = [\n  \"Electronics\",\n  \"Clothing\",\n  \"Books\",\n  \"Home & Garden\",\n  \"Toys\",\n];\nfunction CategoryFilter() {\n  return (\n    <CollapsibleFilter icon={Tag} title=\"Category\">\n      {categories.map((category) => (\n        <div className=\"mb-2 flex items-center space-x-3\" key={category}>\n          <Checkbox id={category} />\n          <Label htmlFor={category}>{category}</Label>\n        </div>\n      ))}\n    </CollapsibleFilter>\n  );\n}\n\nconst CollapsibleFilter = ({\n  title,\n  icon: Icon,\n  children,\n}: {\n  title: string;\n  icon?: LucideIcon;\n  children: ReactNode;\n}) => (\n  <Collapsible defaultOpen>\n    <CollapsibleTrigger className=\"group flex w-full items-center justify-between py-3\">\n      <h3 className=\"flex items-center gap-2 font-semibold text-sm\">\n        {!!Icon && <Icon className=\"h-5 w-5\" />} {title}\n      </h3>\n      <ChevronDown className=\"h-4 w-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180\" />\n    </CollapsibleTrigger>\n    <CollapsibleContent className=\"pt-1 pb-3\">{children}</CollapsibleContent>\n  </Collapsible>\n);\n\nexport default CollapsibleFilters;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}