Button Group

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