{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-7",
  "type": "registry:component",
  "title": "Dropdown Menu 7",
  "description": "Dropdown Menu 7. A menu that displays a list of actions or options when triggered, typically by a button or icon.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/dropdown-menu-7.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { FaMinus } from 'react-icons/fa6';\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/base-ui/dropdown-menu';\n\nconst members = [\n  {\n    src: 'https://assets.watermelon.sh/wm_alex.png',\n    fallback: 'AX',\n    name: 'Alex',\n    role: 'Frontend Engineer',\n    status: 'online',\n  },\n  {\n    src: 'https://assets.watermelon.sh/wm_ben.png',\n    fallback: 'BN',\n    name: 'Ben',\n    role: 'Platform Lead',\n    status: 'online',\n  },\n  {\n    src: 'https://assets.watermelon.sh/wm_josh.png',\n    fallback: 'JS',\n    name: 'Josh',\n    role: 'Fullstack Dev',\n    status: 'offline',\n  },\n  {\n    src: 'https://assets.watermelon.sh/wm_olivia.png',\n    fallback: 'OL',\n    name: 'Olivia',\n    role: 'React Core',\n    status: 'offline',\n  },\n];\n\nconst DropdownMenu7 = () => {\n  return (\n    <div>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"rounded-lg\">\n            Team\n          </Button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent className=\"bg-popover w-80 rounded-lg border p-1 shadow-md\" align='center'>\n          <DropdownMenuLabel className=\"px-2 pb-1 text-sm font-semibold\">\n            Team Members\n          </DropdownMenuLabel>\n\n          <DropdownMenuGroup>\n            {members.map((member, index) => (\n              <DropdownMenuItem\n                key={index}\n                className=\"hover:bg-accent/50! flex cursor-pointer items-center gap-3 rounded-lg p-1\"\n              >\n                <div className=\"relative\">\n                  <Avatar className=\"h-9 w-9\">\n                    <AvatarImage src={member.src} alt={member.name} />\n                    <AvatarFallback className=\"text-xs\">\n                      {member.fallback}\n                    </AvatarFallback>\n                  </Avatar>\n\n                  <span\n                    className={`border-background absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full border ${\n                      member.status === 'online'\n                        ? 'bg-green-500'\n                        : 'bg-muted-foreground'\n                    }`}\n                  />\n                </div>\n\n                <div className=\"flex flex-1 flex-col\">\n                  <span className=\"text-popover-foreground text-sm font-medium\">\n                    {member.name}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    {member.role}\n                  </span>\n                </div>\n\n                <div className=\"bg-muted hover:bg-muted/70 flex h-7 w-7 items-center justify-center rounded-lg transition-all\">\n                  <FaMinus className=\"text-xs\" />\n                </div>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n\n          <DropdownMenuSeparator className=\"my-2\" />\n\n          <DropdownMenuItem className=\"bg-transparent! p-0 hover:bg-transparent!\">\n            <Button\n              variant={'ghost'}\n              className=\"bg-primary hover:bg-primary/90! group flex w-full items-center justify-center gap-2 rounded-lg border border-white/20 p-3 text-neutral-100! shadow-sm hover:text-neutral-200! dark:border-black/20\"\n            >\n              Add Member\n            </Button>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\nexport default DropdownMenu7;\n"
    }
  ]
}