Buttons group

1import type { VariantProps } from "class-variance-authority";
2import type * as React from "react";
3import { Children, cloneElement, type ReactElement } from "react";
4import type { buttonVariants } from "@/components/ui/button";
5import { cn } from "@/lib/utils";
6 
7interface ButtonGroupProps {
8	className?: string;
9	orientation?: "horizontal" | "vertical";
10	children: ReactElement<
11		React.ComponentProps<"button"> &
12			VariantProps<typeof buttonVariants> & {
13				asChild?: boolean;
14			}
15	>[];
16}
17 
18export const ButtonGroup = ({
19	className,
20	orientation = "horizontal",
21	children,
22}: ButtonGroupProps) => {
23	const totalButtons = Children.count(children);
24	const isHorizontal = orientation === "horizontal";
25	const isVertical = orientation === "vertical";
26 
27	return (
28		<div
29			className={cn(
30				"flex",
31				{
32					"flex-col": isVertical,
33					"w-fit": isVertical,
34				},
35				className,
36			)}
37		>
38			{Children.map(children, (child, index) => {
39				const isFirst = index === 0;
40				const isLast = index === totalButtons - 1;
41 
42				return cloneElement(child, {
43					className: cn(
44						{
45							"rounded-s-none": isHorizontal && !isFirst,
46							"rounded-e-none": isHorizontal && !isLast,
47							"border-s-0": isHorizontal && !isFirst,
48 
49							"rounded-t-none": isVertical && !isFirst,
50							"rounded-b-none": isVertical && !isLast,
51							"border-t-0": isVertical && !isFirst,
52						},
53						child.props.className,
54					),
55				});
56			})}
57		</div>
58	);
59};