button-group-menu-demo

1"use client";
2
3import {
4  AlertTriangleIcon,
5  CheckIcon,
6  ChevronDownIcon,
7  CopyIcon,
8  ShareIcon,
9  TrashIcon,
10  UserRoundXIcon,
11  VolumeOffIcon,
12} from "lucide-react";
13
14import { Button } from "@/registry/pure-ui/ui/button";
15import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
16import {
17  Menu,
18  MenuPopup,
19  MenuGroup,
20  MenuItem,
21  MenuSeparator,
22  MenuTrigger,
23} from "@/registry/pure-ui/ui/menu";
24
25export function ButtonGroupMenuDemo() {
26  return (
27    <ButtonGroup>
28      <Button variant="outline">Follow</Button>
29      <Menu>
30        <MenuTrigger render={<Button variant="outline" className="pl-2!" />}>
31          <ChevronDownIcon />
32        </MenuTrigger>
33        <MenuPopup align="end" className="[--radius:1rem]">
34          <MenuGroup>
35            <MenuItem>
36              <VolumeOffIcon />
37              Mute Conversation
38            </MenuItem>
39            <MenuItem>
40              <CheckIcon />
41              Mark as Read
42            </MenuItem>
43            <MenuItem>
44              <AlertTriangleIcon />
45              Report Conversation
46            </MenuItem>
47            <MenuItem>
48              <UserRoundXIcon />
49              Block User
50            </MenuItem>
51            <MenuItem>
52              <ShareIcon />
53              Share Conversation
54            </MenuItem>
55            <MenuItem>
56              <CopyIcon />
57              Copy Conversation
58            </MenuItem>
59          </MenuGroup>
60          <MenuSeparator />
61          <MenuGroup>
62            <MenuItem className="text-destructive hover:text-destructive">
63              <TrashIcon />
64              Delete Conversation
65            </MenuItem>
66          </MenuGroup>
67        </MenuPopup>
68      </Menu>
69    </ButtonGroup>
70  );
71}