Dropdown Menu

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/base-vega/components/example"
9import {
10  Avatar,
11  AvatarFallback,
12  AvatarImage,
13} from "@/registry/base-vega/ui/avatar"
14import { Button } from "@/registry/base-vega/ui/button"
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogHeader,
20  DialogTitle,
21  DialogTrigger,
22} from "@/registry/base-vega/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/base-vega/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      <DropdownMenuSides />
48      <DropdownMenuWithIcons />
49      <DropdownMenuWithShortcuts />
50      <DropdownMenuWithSubmenu />
51      <DropdownMenuWithCheckboxes />
52      <DropdownMenuWithCheckboxesIcons />
53      <DropdownMenuWithRadio />
54      <DropdownMenuWithRadioIcons />
55      <DropdownMenuWithDestructive />
56      <DropdownMenuWithAvatar />
57      <DropdownMenuInDialog />
58      <DropdownMenuWithInset />
59    </ExampleWrapper>
60  )
61}
62 
63function DropdownMenuBasic() {
64  return (
65    <Example title="Basic">
66      <DropdownMenu>
67        <DropdownMenuTrigger
68          render={<Button variant="outline" className="w-fit" />}
69        >
70          Open
71        </DropdownMenuTrigger>
72        <DropdownMenuContent>
73          <DropdownMenuGroup>
74            <DropdownMenuLabel>My Account</DropdownMenuLabel>
75            <DropdownMenuItem>Profile</DropdownMenuItem>
76            <DropdownMenuItem>Billing</DropdownMenuItem>
77            <DropdownMenuItem>Settings</DropdownMenuItem>
78          </DropdownMenuGroup>
79          <DropdownMenuSeparator />
80          <DropdownMenuItem>GitHub</DropdownMenuItem>
81          <DropdownMenuItem>Support</DropdownMenuItem>
82          <DropdownMenuItem disabled>API</DropdownMenuItem>
83        </DropdownMenuContent>
84      </DropdownMenu>
85    </Example>
86  )
87}
88 
89function DropdownMenuSides() {
90  return (
91    <Example title="Sides" containerClassName="col-span-2">
92      <div className="flex flex-wrap justify-center gap-2">
93// … truncated