{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rich-dropdown",
  "type": "registry:component",
  "title": "Rich Dropdown",
  "description": "A dropdown menu with rich content",
  "dependencies": [
    "lucide-react",
    "next-themes"
  ],
  "registryDependencies": [
    "dropdown-menu",
    "button",
    "select",
    "switch",
    "utils",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/dropdown-menu/rich-dropdown.tsx",
      "content": "'use client'\r\n\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n} from '@/registry/default/ui/dropdown-menu'\r\nimport { DropdownMenuItem as RadixDropdownMenuItem } from '@radix-ui/react-dropdown-menu'\r\nimport { Label } from '@/registry/default/ui/label'\r\nimport {\r\n    ArrowDownAZIcon,\r\n    ArrowUpAZIcon,\r\n    ChevronDownIcon,\r\n    XIcon,\r\n} from 'lucide-react'\r\nimport {\r\n    Select,\r\n    SelectContent,\r\n    SelectItem,\r\n    SelectTrigger,\r\n    SelectValue,\r\n} from '@/registry/default/ui/select'\r\nimport { Switch } from '@/registry/default/ui/switch'\r\nimport React from 'react'\r\nimport { useTheme } from 'next-themes'\r\n\r\ntype Item = {\r\n    label: string\r\n    ItemComponent: React.ReactNode\r\n}\r\n\r\nconst items: Item[] = [\r\n    {\r\n        label: 'Filter',\r\n        ItemComponent: <FilterItem />,\r\n    },\r\n    {\r\n        label: 'Title',\r\n        ItemComponent: <TitleComponent />,\r\n    },\r\n    { label: 'Custom Config', ItemComponent: <CustomConfigComponent /> },\r\n    { label: 'Dark Mode', ItemComponent: <DarkModeComponent /> },\r\n]\r\n\r\nexport default function RichDropdown() {\r\n    return (\r\n        <DropdownMenu>\r\n            <DropdownMenuTrigger asChild>\r\n                <Button variant=\"outline\" className=\"cursor-pointer\">\r\n                    Rich Dropdown <ChevronDownIcon />\r\n                </Button>\r\n            </DropdownMenuTrigger>\r\n            <DropdownMenuContent className=\"w-[100svw] max-w-[250px]\">\r\n                {items.map((item) => (\r\n                    <div\r\n                        key={item.label}\r\n                        className=\"focus-within:bg-accent focus-within:text-accent-foreground grid min-h-9 grid-cols-2 place-content-center gap-2 rounded-md px-2 py-1.5 transition-all\"\r\n                    >\r\n                        <Label className=\"pl-2\">{item.label}</Label>\r\n\r\n                        {item.ItemComponent}\r\n                    </div>\r\n                ))}\r\n\r\n                <DropdownMenuSeparator />\r\n                <DropdownMenuItem className=\"flex justify-center pl-0\">\r\n                    Clear all\r\n                </DropdownMenuItem>\r\n            </DropdownMenuContent>\r\n        </DropdownMenu>\r\n    )\r\n}\r\n\r\nfunction FilterItem() {\r\n    return (\r\n        <Select defaultValue=\"asc\">\r\n            <div className=\"flex justify-center\">\r\n                <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>\r\n                    <SelectTrigger className=\"w-fit\" size=\"sm\">\r\n                        <SelectValue placeholder=\"Filter\" />\r\n                    </SelectTrigger>\r\n                </DropdownMenuItem>\r\n            </div>\r\n\r\n            <SelectContent align=\"end\">\r\n                <SelectItem value=\"asc\">\r\n                    <ArrowDownAZIcon /> Asc\r\n                </SelectItem>\r\n                <SelectItem value=\"desc\">\r\n                    <ArrowUpAZIcon /> Desc\r\n                </SelectItem>\r\n                <SelectItem value=\"none\">\r\n                    <XIcon /> None\r\n                </SelectItem>\r\n            </SelectContent>\r\n        </Select>\r\n    )\r\n}\r\n\r\nfunction TitleComponent() {\r\n    return (\r\n        <div className=\"flex items-center justify-center\">\r\n            <RadixDropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>\r\n                <Switch />\r\n            </RadixDropdownMenuItem>\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction CustomConfigComponent() {\r\n    return (\r\n        <div className=\"flex items-center justify-center\">\r\n            <RadixDropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>\r\n                <Switch />\r\n            </RadixDropdownMenuItem>\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction DarkModeComponent() {\r\n    const { resolvedTheme, setTheme } = useTheme()\r\n\r\n    return (\r\n        <div className=\"flex items-center justify-center\">\r\n            <RadixDropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>\r\n                <Switch\r\n                    checked={resolvedTheme === 'dark'}\r\n                    onCheckedChange={(checked) =>\r\n                        setTheme(checked ? 'dark' : 'light')\r\n                    }\r\n                />\r\n            </RadixDropdownMenuItem>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/rich-dropdown.tsx"
    }
  ]
}