Button Group

1"use client"
2 
3import { useState } from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import { Button } from "@/registry/radix-sera/ui/button"
10import {
11  ButtonGroup,
12  ButtonGroupText,
13} from "@/registry/radix-sera/ui/button-group"
14import {
15  DropdownMenu,
16  DropdownMenuContent,
17  DropdownMenuGroup,
18  DropdownMenuItem,
19  DropdownMenuSeparator,
20  DropdownMenuTrigger,
21} from "@/registry/radix-sera/ui/dropdown-menu"
22import { Field, FieldGroup } from "@/registry/radix-sera/ui/field"
23import { Input } from "@/registry/radix-sera/ui/input"
24import {
25  InputGroup,
26  InputGroupAddon,
27  InputGroupInput,
28} from "@/registry/radix-sera/ui/input-group"
29import { Label } from "@/registry/radix-sera/ui/label"
30import {
31  Select,
32  SelectContent,
33  SelectGroup,
34  SelectItem,
35  SelectTrigger,
36  SelectValue,
37} from "@/registry/radix-sera/ui/select"
38import {
39  Tooltip,
40  TooltipContent,
41  TooltipTrigger,
42} from "@/registry/radix-sera/ui/tooltip"
43import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
44 
45export default function ButtonGroupExample() {
46  return (
47    <ExampleWrapper>
48      <ButtonGroupBasic />
49      <ButtonGroupWithInput />
50      <ButtonGroupWithText />
51      <ButtonGroupWithDropdown />
52      <ButtonGroupWithSelect />
53      <ButtonGroupWithIcons />
54      <ButtonGroupWithInputGroup />
55      <ButtonGroupWithFields />
56      <ButtonGroupWithLike />
57      <ButtonGroupWithSelectAndInput />
58      <ButtonGroupNested />
59      <ButtonGroupPagination />
60      <ButtonGroupPaginationSplit />
61      <ButtonGroupNavigation />
62      <ButtonGroupTextAlignment />
63      <ButtonGroupVertical />
64      <ButtonGroupVerticalNested />
65    </ExampleWrapper>
66  )
67}
68 
69function ButtonGroupBasic() {
70  return (
71    <Example title="Basic">
72      <div className="flex flex-col gap-4">
73        <ButtonGroup>
74          <Button variant="outline">Button</Button>
75          <Button variant="outline">Another Button</Button>
76        </ButtonGroup>
77      </div>
78    </Example>
79  )
80}
81 
82function ButtonGroupWithInput() {
83  return (
84    <Example title="With Input">
85      <div className="flex flex-col gap-4">
86        <ButtonGroup>
87          <Button variant="outline">Button</Button>
88          <Input placeholder="Type something here..." />
89        </ButtonGroup>
90        <ButtonGroup>
91          <Input placeholder="Type something here..." />
92          <Button variant="outline">Button</Button>
93        </ButtonGroup>
94      </div>
95    </Example>
96  )
97}
98 
99// … truncated