Dropdown

1import React from "react";
2import { User, Settings, LogOut, Code, MessageCircle, Github, Heart, Sun, Moon, Laptop } from "lucide-react";
3import { AnimatedDropdown } from "@/components/dropdown-menu/AnimatedDropdown";
4import { Button } from "@/components/ui/button";
5
6const menuData = {
7  label: "My Account",
8  items: [
9    {
10      label: "Profile",
11      icon: User,
12      onClick: () => console.log("Profile clicked"),
13    },
14    {
15      label: "Theme",
16      icon: Sun,
17      submenu: {
18        label: "Theme",
19        items: [
20          { label: "Light", icon: Sun, onClick: () => console.log("Light theme") },
21          { label: "Dark", icon: Moon, onClick: () => console.log("Dark theme") },
22          { label: "System", icon: Laptop, onClick: () => console.log("System theme") },
23        ],
24      },
25    },
26    {
27      label: "Settings",
28      icon: Settings,
29      submenu: {
30        label: "Settings",
31        items: [
32          {
33            label: "Account",
34            icon: User,
35            submenu: {
36              label: "Account",
37              items: [
38                { label: "Security", onClick: () => {} },
39                { label: "Privacy", onClick: () => {} },
40              ],
41            },
42          },
43          { label: "Notifications", icon: MessageCircle, onClick: () => {} },
44          { label: "API Keys", icon: Code, onClick: () => {} },
45        ],
46      },
47    },
48    { separator: true },
49    {
50      label: "GitHub",
51      icon: Github,
52      onClick: () => window.open("https://github.com", "_blank"),
53    },
54    {
55      label: "Support",
56      icon: Heart,
57      submenu: {
58        label: "Support",
59        items: [
60          { label: "Help Center", onClick: () => {} },
61          { label: "Chat with us", onClick: () => {} },
62        ],
63      },
64    },
65    { separator: true },
66    {
67      label: "Log out",
68      icon: LogOut,
69      onClick: () => console.log("Logout clicked"),
70    },
71  ],
72};
73
74export function DropdownDemo() {
75  return (
76    <div className="flex items-center justify-center p-20 min-h-[350px]">
77      <AnimatedDropdown 
78        trigger={
79          <Button variant="outline" className="w-[200px] justify-between text-black/80">
80            Update Settings
81            <Settings className="w-4 h-4 ml-2 opacity-50" />
82          </Button>
83        } 
84        menu={menuData} 
85      />
86    </div>
87  );
88}`;
89
90// … truncated