{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-8",
  "type": "registry:component",
  "title": "Collapsible 8",
  "description": "Collapsible 8. A collapsible is a component that allows users to show or hide content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "collapsible",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/collapsible-8.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  ChevronRightIcon,\n  DotIcon,\n  FolderKanbanIcon,\n  LogOutIcon,\n  SettingsIcon,\n  UserIcon,\n  UsersIcon,\n} from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/base-ui/collapsible';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/base-ui/dropdown-menu';\n\ntype MenuLink = {\n  icon: LucideIcon;\n  label: string;\n};\n\ntype MenuSection = {\n  icon: LucideIcon;\n  items: readonly string[];\n  label: string;\n};\n\nconst primaryLinks: readonly MenuLink[] = [\n  { icon: UserIcon, label: 'Profile' },\n] as const;\n\nconst sections: readonly MenuSection[] = [\n  {\n    icon: SettingsIcon,\n    label: 'Settings',\n    items: ['Appearance', 'Notifications', 'Billing'],\n  },\n  {\n    icon: UsersIcon,\n    label: 'Workspace',\n    items: ['Members', 'Teams', 'Projects'],\n  },\n] as const;\n\nconst footerLink: MenuLink = {\n  icon: LogOutIcon,\n  label: 'Log out',\n};\n\ntype SectionRowProps = {\n  section: MenuSection;\n};\n\nconst SectionRow = ({ section }: SectionRowProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const SectionIcon = section.icon;\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className=\"flex flex-col gap-1\"\n    >\n      <CollapsibleTrigger className=\"hover:bg-accent hover:text-accent-foreground flex items-center justify-between rounded-md px-2 py-1.5 text-sm outline-none\">\n        <div className=\"flex items-center gap-2\">\n          <SectionIcon className=\"text-muted-foreground size-4\" />\n          <span>{section.label}</span>\n        </div>\n        <ChevronRightIcon\n          className={`size-4 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`}\n        />\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pl-7\">\n        <div className=\"flex flex-col gap-1 py-1\">\n          {section.items.map((item) => (\n            <button\n              key={item}\n              type=\"button\"\n              className=\"text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors\"\n            >\n              <DotIcon className=\"size-4\" />\n              <span>{item}</span>\n            </button>\n          ))}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst Collapsible8 = () => {\n  const FooterIcon = footerLink.icon;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" className=\"border-border/70\">\n          <FolderKanbanIcon className=\"size-4\" />\n          Workspace menu\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-60\">\n        {primaryLinks.map((link) => {\n          const LinkIcon = link.icon;\n\n          return (\n            <DropdownMenuItem\n              key={link.label}\n              className=\"text-sky-600 focus:text-sky-700 dark:text-sky-400 dark:focus:text-sky-300\"\n            >\n              <LinkIcon className=\"size-4\" />\n              <span>{link.label}</span>\n            </DropdownMenuItem>\n          );\n        })}\n        <DropdownMenuSeparator />\n        <div className=\"px-1 py-1\">\n          {sections.map((section) => (\n            <SectionRow key={section.label} section={section} />\n          ))}\n        </div>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">\n          <FooterIcon className=\"size-4\" />\n          <span>{footerLink.label}</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n\nexport default Collapsible8;\n"
    }
  ]
}