Dropdown Menu

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import {
10  Avatar,
11  AvatarFallback,
12  AvatarImage,
13} from "@/registry/radix-sera/ui/avatar"
14import { Button } from "@/registry/radix-sera/ui/button"
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogHeader,
20  DialogTitle,
21  DialogTrigger,
22} from "@/registry/radix-sera/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/radix-sera/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      <DropdownMenuWithInset />
58    </ExampleWrapper>
59  )
60}
61 
62function DropdownMenuBasic() {
63  return (
64    <Example title="Basic">
65      <DropdownMenu>
66        <DropdownMenuTrigger asChild>
67          <Button variant="outline" className="w-fit">
68            Open
69          </Button>
70        </DropdownMenuTrigger>
71        <DropdownMenuContent>
72          <DropdownMenuGroup>
73            <DropdownMenuLabel>My Account</DropdownMenuLabel>
74            <DropdownMenuItem>Profile</DropdownMenuItem>
75            <DropdownMenuItem>Billing</DropdownMenuItem>
76            <DropdownMenuItem>Settings</DropdownMenuItem>
77          </DropdownMenuGroup>
78          <DropdownMenuSeparator />
79          <DropdownMenuGroup>
80            <DropdownMenuItem>GitHub</DropdownMenuItem>
81            <DropdownMenuItem disabled>API</DropdownMenuItem>
82            <DropdownMenuItem>Support</DropdownMenuItem>
83          </DropdownMenuGroup>
84        </DropdownMenuContent>
85      </DropdownMenu>
86    </Example>
87  )
88}
89 
90function DropdownMenuWithIcons() {
91  return (
92    <Example title="With Icons">
93      <DropdownMenu>
94// … truncated