36 lines
690 B
TypeScript
36 lines
690 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box, Spacing } from './Box';
|
|
|
|
export interface ButtonGroupProps {
|
|
children: ReactNode;
|
|
alignment?: 'start' | 'center' | 'end' | 'between';
|
|
gap?: Spacing;
|
|
marginTop?: Spacing;
|
|
}
|
|
|
|
export const ButtonGroup = ({
|
|
children,
|
|
alignment = 'start',
|
|
gap = 4,
|
|
marginTop = 0
|
|
}: ButtonGroupProps) => {
|
|
const justifyContentMap = {
|
|
start: 'start',
|
|
center: 'center',
|
|
end: 'end',
|
|
between: 'between'
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent={justifyContentMap[alignment] as any}
|
|
gap={gap as any}
|
|
marginTop={marginTop}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|