button-group-nested-demo

1"use client";
2
3import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
4
5import { Button } from "@/registry/pure-ui/ui/button";
6import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
7
8export function ButtonGroupNestedDemo() {
9  return (
10    <ButtonGroup>
11      <ButtonGroup>
12        <Button variant="outline" size="sm">
13          1
14        </Button>
15        <Button variant="outline" size="sm">
16          2
17        </Button>
18        <Button variant="outline" size="sm">
19          3
20        </Button>
21        <Button variant="outline" size="sm">
22          4
23        </Button>
24        <Button variant="outline" size="sm">
25          5
26        </Button>
27      </ButtonGroup>
28      <ButtonGroup>
29        <Button variant="outline" size="icon-sm" aria-label="Previous">
30          <ArrowLeftIcon />
31        </Button>
32        <Button variant="outline" size="icon-sm" aria-label="Next">
33          <ArrowRightIcon />
34        </Button>
35      </ButtonGroup>
36    </ButtonGroup>
37  );
38}