A pager, a split button and a vertical group

// apps/docs/examples/ui/button-group.tsx'use client';
import {useState} from 'react';import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  ButtonGroup,  ButtonGroupSeparator,  ButtonGroupText,} from '@workspace/active-ui/components/primitives/button-group';
const PAGES = 12;
/** * Buttons that belong together, joined into one control: a pager with its * position as text between the buttons, and a split button whose second * half offers more of the same action. The group is `role="group"` and * takes the name you give it. */export default function ButtonGroupExample() {  const [page, setPage] = useState(1);  return (    <div className="flex flex-col items-start gap-6">      <ButtonGroup aria-label="Pages">        <Button          variant="outline"          size="icon"          aria-label="Previous page"          disabled={page === 1}          onClick={() => setPage(page - 1)}        >          <ChevronLeftIcon aria-hidden />        </Button>        <ButtonGroupText aria-live="polite">          Page {page} of {PAGES}        </ButtonGroupText>        <Button          variant="outline"          size="icon"          aria-label="Next page"          disabled={page === PAGES}          onClick={() => setPage(page + 1)}        >          <ChevronRightIcon aria-hidden />        </Button>      </ButtonGroup>
      <ButtonGroup aria-label="Export">        <Button>Export</Button>        <ButtonGroupSeparator />        <Button size="icon" aria-label="More export options">          <ChevronDownIcon aria-hidden />        </Button>      </ButtonGroup>
      <ButtonGroup orientation="vertical" aria-label="Zoom">        <Button variant="outline">Zoom in</Button>        <Button variant="outline">Zoom out</Button>        <Button variant="outline">Fit</Button>      </ButtonGroup>    </div>  );}