button-group-demo

1"use client";
2
3import { useState } from "react";
4import {
5  ArchiveIcon,
6  ArrowLeftIcon,
7  CalendarPlusIcon,
8  ClockIcon,
9  ListFilterPlusIcon,
10  MailCheckIcon,
11  MoreHorizontalIcon,
12  TagIcon,
13  Trash2Icon,
14} from "lucide-react";
15
16import {
17  Menu,
18  MenuGroup,
19  MenuItem,
20  MenuPopup,
21  MenuRadioGroup,
22  MenuRadioItem,
23  MenuSeparator,
24  MenuSub,
25  MenuSubPopup,
26  MenuSubTrigger,
27  MenuTrigger,
28} from "@/registry/pure-ui/ui/menu";
29
30import { Button } from "@/registry/pure-ui/ui/button";
31import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
32
33export function ButtonGroupDemo() {
34  const [label, setLabel] = useState("personal");
35
36  return (
37    <ButtonGroup>
38      <ButtonGroup className="hidden sm:flex">
39        <Button variant="outline" size="icon" aria-label="Go Back">
40          <ArrowLeftIcon />
41        </Button>
42      </ButtonGroup>
43
44      <ButtonGroup>
45        <Button variant="outline">Archive</Button>
46        <Button variant="outline">Report</Button>
47      </ButtonGroup>
48
49      <ButtonGroup>
50        <Button variant="outline">Snooze</Button>
51
52        <Menu>
53          <MenuTrigger
54            render={
55              <Button variant="outline" size="icon" aria-label="More Options" />
56            }
57          >
58            <MoreHorizontalIcon />
59          </MenuTrigger>
60          <MenuPopup align="end" className="w-52">
61            <MenuGroup>
62              <MenuItem>
63                <MailCheckIcon />
64                Mark as Read
65              </MenuItem>
66              <MenuItem>
67                <ArchiveIcon />
68                Archive
69              </MenuItem>
70            </MenuGroup>
71            <MenuSeparator />
72            <MenuGroup>
73              <MenuItem>
74                <ClockIcon />
75                Snooze
76              </MenuItem>
77              <MenuItem>
78                <CalendarPlusIcon />
79                Add to Calendar
80              </MenuItem>
81              <MenuItem>
82                <ListFilterPlusIcon />
83                Add to List
84              </MenuItem>
85              <MenuSub>
86                <MenuSubTrigger>
87                  <TagIcon />
88                  Label As...
89                </MenuSubTrigger>
90                <MenuSubPopup>
91                  <MenuRadioGroup value={label} onValueChange={setLabel}>
92                    <MenuRadioItem value="personal">Personal</MenuRadioItem>
93// … truncated