39 lines
860 B
TypeScript
39 lines
860 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
export interface GroupProps {
|
|
children: ReactNode;
|
|
direction?: 'row' | 'col' | 'column';
|
|
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
gap?: number;
|
|
wrap?: boolean;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const Group = ({
|
|
children,
|
|
direction = 'row',
|
|
align = 'center',
|
|
justify = 'start',
|
|
gap = 3,
|
|
wrap = false,
|
|
fullWidth = false,
|
|
}: GroupProps) => {
|
|
const finalDirection = direction === 'column' ? 'col' : direction;
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
flexDirection={finalDirection}
|
|
alignItems={align}
|
|
justifyContent={justify}
|
|
gap={gap}
|
|
flexWrap={wrap ? 'wrap' : 'nowrap'}
|
|
fullWidth={fullWidth}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|