{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-6",
  "type": "registry:component",
  "title": "Dropdown Menu 6",
  "description": "Dropdown Menu 6. A menu that displays a list of actions or options when triggered, typically by a button or icon.",
  "dependencies": [],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "components/watermelon/dropdown-menu-6.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport { Badge } from '@/components/base-ui/badge';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '@/components/base-ui/dropdown-menu';\n\nconst listItems = [\n  {\n    src: 'https://github.com/ThePrimeagen.png',\n    fallback: 'TP',\n    name: 'ThePrimeagen',\n    message: 'just shipped a new vim config 🚀',\n    time: '2m ago',\n    newMessages: 2,\n  },\n  {\n    src: 'https://github.com/leerob.png',\n    fallback: 'LR',\n    name: 'Lee Robinson',\n    message: 'Next.js update is live',\n    time: '10m ago',\n    newMessages: 1,\n  },\n  {\n    src: 'https://github.com/gaearon.png',\n    fallback: 'DA',\n    name: 'Dan Abramov',\n    message: 'thinking about React again...',\n    time: '1h ago',\n    newMessages: null,\n  },\n  {\n    src: 'https://github.com/t3dotgg.png',\n    fallback: 'T3',\n    name: 'Theo (t3.gg)',\n    message: 'typesafety > everything',\n    time: '3h ago',\n    newMessages: 3,\n  },\n  {\n    src: 'https://github.com/sindresorhus.png',\n    fallback: 'SR',\n    name: 'Sindre Sorhus',\n    message: 'published 3 new packages today',\n    time: '5h ago',\n    newMessages: null,\n  },\n];\n\nconst DropdownMenu6 = () => {\n  return (\n    <div>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"rounded-lg\">\n            Dev Inbox\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            Messages\n          </DropdownMenuLabel>\n\n          <DropdownMenuGroup>\n            {listItems.map((item, index) => (\n              <DropdownMenuItem\n                key={index}\n                className=\"group dark:hover:bg-muted/50! flex cursor-pointer items-center gap-3 rounded-lg p-2 transition-all\"\n              >\n                <Avatar className=\"h-9 w-9 transition-transform duration-200 group-hover:scale-105 \">\n                  <AvatarImage src={item.src} alt={item.name}  />\n                  <AvatarFallback className=\"text-xs\">\n                    {item.fallback}\n                  </AvatarFallback>\n                </Avatar>\n\n                <div className=\"flex flex-1 flex-col overflow-hidden\">\n                  <span className=\"text-popover-foreground text-sm font-medium\">\n                    {item.name}\n                  </span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {item.message}\n                  </span>\n                </div>\n\n                <div className=\"flex flex-col items-end gap-1\">\n                  <span className=\"text-muted-foreground text-xs\">\n                    {item.time}\n                  </span>\n\n                  {item.newMessages && (\n                    <Badge className=\"h-5 min-w-5 rounded-sm px-1 text-[10px] text-white! \">\n                      {item.newMessages}\n                    </Badge>\n                  )}\n                </div>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\nexport default DropdownMenu6;\n"
    }
  ]
}