Keith WilliamsandGitHub
78d06c6d01
* refactor: Move classNames from @calcom/lib to @calcom/ui * Import fix * Removed extra import of classNames * Removed tailwind-merge from @calcom/lib
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
import classNames from "@calcom/ui/classNames";
|
|
|
|
type Props = { children: React.ReactNode; combined?: boolean; containerProps?: JSX.IntrinsicElements["div"] };
|
|
|
|
const sizeToRadius = {
|
|
lg: "12px",
|
|
base: "8px",
|
|
sm: "10px",
|
|
xs: "8px",
|
|
} as const;
|
|
|
|
export function ButtonGroup({ children, combined = false, containerProps }: Props) {
|
|
// Get the size from the first button child if it exists
|
|
const firstButton = React.Children.toArray(children)[0] as React.ReactElement;
|
|
const size = firstButton?.props?.size || "base";
|
|
const radius = sizeToRadius[size as keyof typeof sizeToRadius];
|
|
|
|
const style = combined ? ({ "--btn-group-radius": radius } as React.CSSProperties) : undefined;
|
|
|
|
return (
|
|
<div
|
|
{...containerProps}
|
|
style={style}
|
|
className={classNames(
|
|
"flex",
|
|
!combined
|
|
? "space-x-2 rtl:space-x-reverse"
|
|
: "[&>*:first-child]:rounded-l-[var(--btn-group-radius)] rtl:[&>*:first-child]:rounded-l-none rtl:[&>*:first-child]:rounded-r-[var(--btn-group-radius)] [&>*:last-child]:rounded-r-[var(--btn-group-radius)] rtl:[&>*:last-child]:rounded-l-[var(--btn-group-radius)] rtl:[&>*:last-child]:rounded-r-none [&>*:not(:first-child)]:-ml-[1px] [&>*]:rounded-none [&>*]:border hover:[&>*]:z-[1]",
|
|
containerProps?.className
|
|
)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|