{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-10",
  "type": "registry:component",
  "title": "Dropdown Menu 10",
  "description": "Dropdown Menu 10. A menu that displays a list of actions or options when triggered, typically by a button or icon.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/dropdown-menu-10.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { FaCode, FaBug, FaBell, FaBolt } from 'react-icons/fa6';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '@/components/base-ui/dropdown-menu';\n\nconst options = [\n  { key: 'autoSave', label: 'Auto Save', icon: FaBolt },\n  { key: 'notifications', label: 'Notifications', icon: FaBell },\n  { key: 'debugMode', label: 'Debug Mode', icon: FaBug, disabled: true },\n  { key: 'codeHints', label: 'Code Hints', icon: FaCode },\n];\n\nconst DropdownMenu10 = () => {\n  const [state, setState] = useState({\n    autoSave: true,\n    notifications: false,\n    debugMode: false,\n    codeHints: true,\n  });\n\n  const toggle = (key: string) => {\n    setState((prev) => ({\n      ...prev,\n      [key]: !prev[key as keyof typeof prev],\n    }));\n  };\n\n  return (\n    <div>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"rounded-lg\">\n            Preferences\n          </Button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent className=\"bg-popover w-64 rounded-lg border p-1 shadow-md\" align='center'>\n          <DropdownMenuLabel className=\"px-1 pb-1 text-sm font-semibold\">\n            Dev Preferences\n          </DropdownMenuLabel>\n\n          {options.map((item) => {\n            const Icon = item.icon;\n            const checked = state[item.key as keyof typeof state];\n\n            return (\n              <DropdownMenuCheckboxItem\n                key={item.key}\n                checked={checked}\n                onCheckedChange={() => toggle(item.key)}\n                disabled={item.disabled}\n                className=\"group flex cursor-pointer items-center gap-3 rounded-lg p-1 data-[disabled]:opacity-40\"\n              >\n                <Icon className=\"text-muted-foreground group-hover:text-foreground transition-all duration-200 group-hover:scale-110\" />\n\n                <span className=\"flex-1 text-sm font-medium\">{item.label}</span>\n              </DropdownMenuCheckboxItem>\n            );\n          })}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\nexport default DropdownMenu10;\n"
    }
  ]
}