Dropdown Menu

1'use client'
2
3import Image from 'next/image'
4import Link from 'next/link'
5import {
6    Activity,
7    LogOut,
8    Moon,
9    Plug,
10    Plus,
11    Settings,
12    UserPlus,
13    Users,
14} from 'lucide-react'
15
16import { Badge } from '@/components/ui/badge'
17import { Button } from '@/components/ui/button'
18import {
19    DropdownMenu,
20    DropdownMenuContent,
21    DropdownMenuGroup,
22    DropdownMenuItem,
23    DropdownMenuLabel,
24    DropdownMenuPortal,
25    DropdownMenuSeparator,
26    DropdownMenuShortcut,
27    DropdownMenuSub,
28    DropdownMenuSubContent,
29    DropdownMenuSubTrigger,
30    DropdownMenuTrigger,
31} from '@/components/ui/dropdown-menu'
32import { Switch } from '@/components/ui/switch'
33
34export function DropdownMenuDemo() {
35    return (
36        <DropdownMenu>
37            <DropdownMenuTrigger asChild>
38                <Button variant="outline">Open Dropdown</Button>
39            </DropdownMenuTrigger>
40
41            <DropdownMenuContent className="w-52 sm:w-64" align="start">
42                <div className="flex items-center justify-between p-3">
43                    <div className="flex items-center space-x-3">
44                        <Image
45                            src="/images/profile1.png"
46                            alt="User avatar"
47                            className="h-9 w-9 rounded-full"
48                            width={40}
49                            height={40}
50                        />
51                        <div className="space-y-0.5">
52                            <p className="text-primary text-sm font-medium">
53                                Sbtheme
54                            </p>
55                            <p className="text-muted-foreground text-xs">
56                                Sbtheme.com
57                            </p>
58                        </div>
59                    </div>
60                    <Badge
61                        radius={'full'}
62                        variant={'success'}
63                        className="px-1.5 text-[10px]/2.5"
64                    >
65                        PRO
66                    </Badge>
67                </div>
68
69                <DropdownMenuSeparator />
70
71                <DropdownMenuGroup>
72                    <DropdownMenuItem
73                        onSelect={(e) => e.preventDefault()}
74                        className="flex cursor-pointer items-center justify-between"
75                    >
76                        <span className="flex items-center space-x-2">
77                            <Moon className="size-4" />
78                            <span>Dark Mode</span>
79                        </span>
80                        <Switch />
81                    </DropdownMenuItem>
82                </DropdownMenuGroup>
83
84                <DropdownMenuGroup>
85                    <DropdownMenuItem>
86                        <Activity className="mr-2 size-4" />
87                        Activity
88                    </DropdownMenuItem>
89
90                    <DropdownMenuItem>
91                        <Plug className="mr-2 size-4" />
92                        Integrations
93                    </DropdownMenuItem>
94
95                    <DropdownMenuItem>
96                        <Settings className="mr-2 size-4" />
97                        Settings
98                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
99                    </DropdownMenuItem>
100                </DropdownMenuGroup>
101
102                <DropdownMenuSeparator />
103
104                <DropdownMenuGroup>
105                    <DropdownMenuSub>
106                        <DropdownMenuSubTrigger>
107                            <Users className="mr-2 size-4" />
108                            Manage Accounts
109                        </DropdownMenuSubTrigger>
110                        <DropdownMenuPortal>
111                            <DropdownMenuSubContent>
112                                <DropdownMenuItem>
113                                    <UserPlus className="mr-2 size-4" />
114                                    Invite User
115                                </DropdownMenuItem>
116                                <DropdownMenuItem>
117                                    <Plus className="mr-2 size-4" />
118                                    Add Account
119                                </DropdownMenuItem>
120                            </DropdownMenuSubContent>
121                        </DropdownMenuPortal>
122                    </DropdownMenuSub>
123
124                    <DropdownMenuItem>
125                        <LogOut className="mr-2 size-4" />
126                        Logout
127                    </DropdownMenuItem>
128                </DropdownMenuGroup>
129
130                <DropdownMenuSeparator />
131
132                <DropdownMenuLabel className="px-3 py-1.5 text-xs">
133                    v1.5.69 ·{' '}
134                    <Link href="/terms-of-service" className="underline">
135                        Terms & Conditions
136                    </Link>
137                </DropdownMenuLabel>
138            </DropdownMenuContent>
139        </DropdownMenu>
140    )
141}
142

1'use client'
2
3import * as React from 'react'
4
5import { Button } from '@/components/ui/button'
6import {
7    DropdownMenu,
8    DropdownMenuCheckboxItem,
9    DropdownMenuContent,
10    DropdownMenuLabel,
11    DropdownMenuSeparator,
12    DropdownMenuTrigger,
13} from '@/components/ui/dropdown-menu'
14import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
15
16type Checked = DropdownMenuCheckboxItemProps['checked']
17
18export function DropdownMenuCheckboxes() {
19    const [emailAlerts, setEmailAlerts] = React.useState<Checked>(true)
20    const [pushNotifications, setPushNotifications] =
21        React.useState<Checked>(false)
22    const [smsMessages, setSmsMessages] = React.useState<Checked>(false)
23
24    return (
25        <DropdownMenu>
26            <DropdownMenuTrigger asChild>
27                <Button variant="outline">Open</Button>
28            </DropdownMenuTrigger>
29
30            <DropdownMenuContent className="w-56">
31                <DropdownMenuLabel>Notifications</DropdownMenuLabel>
32                <DropdownMenuSeparator />
33                <DropdownMenuCheckboxItem
34                    checked={emailAlerts}
35                    onCheckedChange={setEmailAlerts}
36                >
37                    Email Alerts
38                </DropdownMenuCheckboxItem>
39                <DropdownMenuCheckboxItem
40                    checked={pushNotifications}
41                    onCheckedChange={setPushNotifications}
42                >
43                    Push Notifications
44                </DropdownMenuCheckboxItem>
45                <DropdownMenuCheckboxItem
46                    checked={smsMessages}
47                    onCheckedChange={setSmsMessages}
48                    disabled
49                >
50                    SMS Messages
51                </DropdownMenuCheckboxItem>
52            </DropdownMenuContent>
53        </DropdownMenu>
54    )
55}
56

1'use client'
2
3import * as React from 'react'
4
5import { Button } from '@/components/ui/button'
6import {
7    DropdownMenu,
8    DropdownMenuContent,
9    DropdownMenuLabel,
10    DropdownMenuRadioGroup,
11    DropdownMenuRadioItem,
12    DropdownMenuSeparator,
13    DropdownMenuTrigger,
14} from '@/components/ui/dropdown-menu'
15
16export function DropdownMenuRadioGroupDemo() {
17    const [layout, setLayout] = React.useState('grid')
18
19    return (
20        <DropdownMenu>
21            <DropdownMenuTrigger asChild>
22                <Button variant="outline">Layout</Button>
23            </DropdownMenuTrigger>
24            <DropdownMenuContent className="w-56">
25                <DropdownMenuLabel>Layout Type</DropdownMenuLabel>
26                <DropdownMenuSeparator />
27                <DropdownMenuRadioGroup
28                    value={layout}
29                    onValueChange={setLayout}
30                >
31                    <DropdownMenuRadioItem value="grid">
32                        Grid
33                    </DropdownMenuRadioItem>
34                    <DropdownMenuRadioItem value="list">
35                        List
36                    </DropdownMenuRadioItem>
37                    <DropdownMenuRadioItem value="compact">
38                        Compact
39                    </DropdownMenuRadioItem>
40                </DropdownMenuRadioGroup>
41            </DropdownMenuContent>
42        </DropdownMenu>
43    )
44}
45