Dropdown Menu

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuGroup,
 5  DropdownMenuItem,
 6  DropdownMenuLabel,
 7  DropdownMenuSeparator,
 8  DropdownMenuShortcut,
 9  DropdownMenuTrigger,
10} from "@/components/wensity/dropdown-menu";
11import { IconClipboard, IconCopy, IconFileText, IconFolder } from "@tabler/icons-react";
12
13export function GroupedDropdown() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger>Edit</DropdownMenuTrigger>
17      <DropdownMenuContent className="w-52">
18        <DropdownMenuLabel>Clipboard</DropdownMenuLabel>
19        <DropdownMenuGroup>
20          <DropdownMenuItem>
21            <IconCopy />
22            Copy
23            <DropdownMenuShortcut keys={["⌘", "C"]} />
24          </DropdownMenuItem>
25          <DropdownMenuItem>
26            <IconClipboard />
27            Paste
28            <DropdownMenuShortcut keys={["⌘", "V"]} />
29          </DropdownMenuItem>
30        </DropdownMenuGroup>
31        <DropdownMenuSeparator />
32        <DropdownMenuLabel>File</DropdownMenuLabel>
33        <DropdownMenuGroup>
34          <DropdownMenuItem>
35            <IconFileText />
36            New file
37          </DropdownMenuItem>
38          <DropdownMenuItem>
39            <IconFolder />
40            New folder
41          </DropdownMenuItem>
42        </DropdownMenuGroup>
43      </DropdownMenuContent>
44    </DropdownMenu>
45  );
46}

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuItem,
 5  DropdownMenuSeparator,
 6  DropdownMenuSub,
 7  DropdownMenuSubContent,
 8  DropdownMenuSubTrigger,
 9  DropdownMenuTrigger,
10} from "@/components/wensity/dropdown-menu";
11import { IconCloudDownload, IconDownload, IconFileExport, IconLink, IconMail } from "@tabler/icons-react";
12
13export function NestedDropdown() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger>Share</DropdownMenuTrigger>
17      <DropdownMenuContent className="w-48">
18        <DropdownMenuItem>
19          <IconLink />
20          Copy link
21        </DropdownMenuItem>
22        <DropdownMenuItem>
23          <IconMail />
24          Email
25        </DropdownMenuItem>
26        <DropdownMenuSeparator />
27        <DropdownMenuSub>
28          <DropdownMenuSubTrigger>
29            <IconDownload />
30            Export as
31          </DropdownMenuSubTrigger>
32          <DropdownMenuSubContent>
33            <DropdownMenuItem>
34              <IconFileExport />
35              PDF
36            </DropdownMenuItem>
37            <DropdownMenuItem>
38              <IconFileExport />
39              CSV
40            </DropdownMenuItem>
41            <DropdownMenuSeparator />
42            <DropdownMenuItem>
43              <IconCloudDownload />
44              Archive (.zip)
45            </DropdownMenuItem>
46          </DropdownMenuSubContent>
47        </DropdownMenuSub>
48      </DropdownMenuContent>
49    </DropdownMenu>
50  );
51}

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  DropdownMenu,
 6  DropdownMenuCheckboxItem,
 7  DropdownMenuContent,
 8  DropdownMenuLabel,
 9  DropdownMenuSeparator,
10  DropdownMenuShortcut,
11  DropdownMenuTrigger,
12} from "@/components/wensity/dropdown-menu";
13import { IconSettings } from "@tabler/icons-react";
14
15export function CheckboxDropdown() {
16  const [showGrid, setShowGrid] = React.useState(true);
17  const [showRuler, setShowRuler] = React.useState(false);
18
19  return (
20    <DropdownMenu>
21      <DropdownMenuTrigger>
22        <IconSettings />
23        View
24      </DropdownMenuTrigger>
25      <DropdownMenuContent className="w-48">
26        <DropdownMenuLabel>Canvas</DropdownMenuLabel>
27        <DropdownMenuCheckboxItem
28          checked={showGrid}
29          onCheckedChange={setShowGrid}
30        >
31          Show grid
32          <DropdownMenuShortcut keys={["⌘", "'"]} />
33        </DropdownMenuCheckboxItem>
34        <DropdownMenuCheckboxItem
35          checked={showRuler}
36          onCheckedChange={setShowRuler}
37        >
38          Show ruler
39          <DropdownMenuShortcut keys={["⌘", "R"]} />
40        </DropdownMenuCheckboxItem>
41        <DropdownMenuSeparator />
42        <DropdownMenuCheckboxItem checked disabled>
43          Snap to grid
44        </DropdownMenuCheckboxItem>
45      </DropdownMenuContent>
46    </DropdownMenu>
47  );
48}

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  DropdownMenu,
 6  DropdownMenuContent,
 7  DropdownMenuLabel,
 8  DropdownMenuRadioGroup,
 9  DropdownMenuRadioItem,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/components/wensity/dropdown-menu";
13import { IconSettings, IconWifi, IconWifiOff } from "@tabler/icons-react";
14
15export function RadioDropdown() {
16  const [density, setDensity] = React.useState("comfortable");
17
18  return (
19    <DropdownMenu>
20      <DropdownMenuTrigger>
21        <IconSettings />
22        Density
23      </DropdownMenuTrigger>
24      <DropdownMenuContent className="w-48">
25        <DropdownMenuLabel>Row height</DropdownMenuLabel>
26        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
27          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
28          <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
29          <DropdownMenuRadioItem value="spacious">Spacious</DropdownMenuRadioItem>
30        </DropdownMenuRadioGroup>
31        <DropdownMenuSeparator />
32        <DropdownMenuLabel>Status</DropdownMenuLabel>
33        <DropdownMenuRadioGroup value="online">
34          <DropdownMenuRadioItem value="online">
35            <IconWifi className="text-emerald-500" />
36            Online
37          </DropdownMenuRadioItem>
38          <DropdownMenuRadioItem value="offline" disabled>
39            <IconWifiOff />
40            Offline
41          </DropdownMenuRadioItem>
42        </DropdownMenuRadioGroup>
43      </DropdownMenuContent>
44    </DropdownMenu>
45  );
46}

 1import {
 2  DropdownMenu,
 3  DropdownMenuContent,
 4  DropdownMenuItem,
 5  DropdownMenuLabel,
 6  DropdownMenuSeparator,
 7  DropdownMenuShortcut,
 8  DropdownMenuTrigger,
 9} from "@/components/wensity/dropdown-menu";
10import { IconArrowBigUp, IconCopy, IconPencil, IconTrash } from "@tabler/icons-react";
11
12export function DestructiveDropdown() {
13  return (
14    <DropdownMenu>
15      <DropdownMenuTrigger>More</DropdownMenuTrigger>
16      <DropdownMenuContent className="w-52">
17        <DropdownMenuLabel>Project</DropdownMenuLabel>
18        <DropdownMenuItem>
19          <IconPencil />
20          Rename
21        </DropdownMenuItem>
22        <DropdownMenuItem>
23          <IconCopy />
24          Duplicate
25          <DropdownMenuShortcut keys={["⌘", "D"]} />
26        </DropdownMenuItem>
27        <DropdownMenuSeparator />
28        <DropdownMenuLabel>Danger zone</DropdownMenuLabel>
29        <DropdownMenuItem destructive>
30          <IconArrowBigUp />
31          Archive
32        </DropdownMenuItem>
33        <DropdownMenuItem destructive>
34          <IconTrash />
35          Delete permanently
36          <DropdownMenuShortcut keys={["⌘", "⌫"]} />
37        </DropdownMenuItem>
38      </DropdownMenuContent>
39    </DropdownMenu>
40  );
41}