Dropdown Menu

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import {
10  Avatar,
11  AvatarFallback,
12  AvatarImage,
13} from "@/registry/bases/radix/ui/avatar"
14import { Button } from "@/registry/bases/radix/ui/button"
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogHeader,
20  DialogTitle,
21  DialogTrigger,
22} from "@/registry/bases/radix/ui/dialog"
23import {
24  DropdownMenu,
25  DropdownMenuCheckboxItem,
26  DropdownMenuContent,
27  DropdownMenuGroup,
28  DropdownMenuItem,
29  DropdownMenuLabel,
30  DropdownMenuPortal,
31  DropdownMenuRadioGroup,
32  DropdownMenuRadioItem,
33  DropdownMenuSeparator,
34  DropdownMenuShortcut,
35  DropdownMenuSub,
36  DropdownMenuSubContent,
37  DropdownMenuSubTrigger,
38  DropdownMenuTrigger,
39} from "@/registry/bases/radix/ui/dropdown-menu"
40import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
41 
42export default function DropdownMenuExample() {
43  return (
44    <ExampleWrapper>
45      <DropdownMenuBasic />
46      <DropdownMenuComplex />
47      <DropdownMenuWithIcons />
48      <DropdownMenuWithShortcuts />
49      <DropdownMenuWithSubmenu />
50      <DropdownMenuWithCheckboxes />
51      <DropdownMenuWithCheckboxesIcons />
52      <DropdownMenuWithRadio />
53      <DropdownMenuWithRadioIcons />
54      <DropdownMenuWithDestructive />
55      <DropdownMenuWithAvatar />
56      <DropdownMenuInDialog />
57    </ExampleWrapper>
58  )
59}
60 
61function DropdownMenuBasic() {
62  return (
63    <Example title="Basic">
64      <DropdownMenu>
65        <DropdownMenuTrigger asChild>
66          <Button variant="outline" className="w-fit">
67            Open
68          </Button>
69        </DropdownMenuTrigger>
70        <DropdownMenuContent>
71          <DropdownMenuGroup>
72            <DropdownMenuLabel>My Account</DropdownMenuLabel>
73            <DropdownMenuItem>Profile</DropdownMenuItem>
74            <DropdownMenuItem>Billing</DropdownMenuItem>
75            <DropdownMenuItem>Settings</DropdownMenuItem>
76          </DropdownMenuGroup>
77          <DropdownMenuSeparator />
78          <DropdownMenuGroup>
79            <DropdownMenuItem>GitHub</DropdownMenuItem>
80            <DropdownMenuItem>Support</DropdownMenuItem>
81            <DropdownMenuItem disabled>API</DropdownMenuItem>
82          </DropdownMenuGroup>
83        </DropdownMenuContent>
84      </DropdownMenu>
85    </Example>
86  )
87}
88 
89function DropdownMenuWithIcons() {
90  return (
91    <Example title="With Icons">
92      <DropdownMenu>
93        <DropdownMenuTrigger asChild>
94// … truncated