cal.pub0.org/packages/ui/components/buttonGroup/ButtonGroup.tsx

31 lines
1.1 KiB
TypeScript

import React from "react";
import classNames from "@calcom/lib/classNames";
type Props = { children: React.ReactNode; combined?: boolean; containerProps?: JSX.IntrinsicElements["div"] };
/**
* Breakdown of Tailwind Magic below
* [&_button]:border-l-0 [&_a]:border-l-0 -> Selects all buttons/a tags and applies a border left of 0
* [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l -> Selects the first child of the content
* ounds the left side
* [&>*:last-child]:rounded-r-md -> Selects the last child of the content and rounds the right side
* We dont need to add border to the right as we never remove it
*/
export function ButtonGroup({ children, combined = false, containerProps }: Props) {
return (
<div
{...containerProps}
className={classNames(
"flex",
!combined
? "space-x-2"
: "[&_button]:rounded-none [&_button]:border-l-0 [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l [&_a]:rounded-none [&_a]:border-l-0 [&>*:last-child]:rounded-r-md",
containerProps?.className
)}>
{children}
</div>
);
}