Button Group

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