Button group

"use client";import { Button } from "@/components/vip-ui/button";import { ButtonGroup } from "@/components/vip-ui/button-group";export function ButtonGroupBasicDemo() {  return (    <ButtonGroup aria-label="Message actions">      <Button variant="ghost">Archive</Button>      <Button variant="ghost">Report</Button>      <Button variant="ghost">Snooze</Button>    </ButtonGroup>  );}

"use client";import { Button } from "@/components/vip-ui/button";import { ButtonGroup } from "@/components/vip-ui/button-group";export function ButtonGroupOrientationsDemo() {  return (    <div className="grid justify-items-center gap-4">      <ButtonGroup aria-label="Save actions">        <Button variant="ghost">Save</Button>        <Button variant="ghost">Discard</Button>      </ButtonGroup>      <ButtonGroup orientation="vertical" aria-label="Review actions">        <Button variant="ghost">Approve</Button>        <Button variant="ghost">Request changes</Button>      </ButtonGroup>    </div>  );}

"use client";import { DotsThreeIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import { ButtonGroup } from "@/components/vip-ui/button-group";import {  MenuContent,  MenuItem,  MenuPopover,  MenuTrigger,} from "@/components/vip-ui/menu";export function ButtonGroupDemo() {  return (    <ButtonGroup aria-label="Draft actions">      <Button variant="ghost">Save draft</Button>      <MenuTrigger>        <Button variant="ghost" iconOnly aria-label="More draft actions">          <DotsThreeIcon aria-hidden="true" />        </Button>        <MenuPopover>          <MenuContent>            <MenuItem>Duplicate draft</MenuItem>            <MenuItem>Archive draft</MenuItem>          </MenuContent>        </MenuPopover>      </MenuTrigger>    </ButtonGroup>  );}

"use client";import { CaretDownIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import { ButtonGroup } from "@/components/vip-ui/button-group";export function ButtonGroupSizesDemo() {  return (    <div className="flex flex-col items-start gap-3">      <ButtonGroup size="xs" aria-label="Publish">        <Button variant="ghost">Publish</Button>        <Button variant="ghost" iconOnly aria-label="More publish options">          <CaretDownIcon aria-hidden="true" />        </Button>      </ButtonGroup>      <ButtonGroup size="sm" aria-label="Publish">        <Button variant="ghost">Publish</Button>        <Button variant="ghost" iconOnly aria-label="More publish options">          <CaretDownIcon aria-hidden="true" />        </Button>      </ButtonGroup>      <ButtonGroup aria-label="Publish">        <Button variant="ghost">Publish</Button>        <Button variant="ghost" iconOnly aria-label="More publish options">          <CaretDownIcon aria-hidden="true" />        </Button>      </ButtonGroup>    </div>  );}