30 lines
621 B
TypeScript
30 lines
621 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
export interface NavGroupProps {
|
|
children: ReactNode;
|
|
direction?: 'horizontal' | 'vertical';
|
|
gap?: number;
|
|
align?: 'start' | 'center' | 'end';
|
|
}
|
|
|
|
export const NavGroup = ({
|
|
children,
|
|
direction = 'horizontal',
|
|
gap = 4,
|
|
align = 'center'
|
|
}: NavGroupProps) => {
|
|
return (
|
|
<Box
|
|
as="nav"
|
|
display="flex"
|
|
flexDirection={direction === 'horizontal' ? 'row' : 'col'}
|
|
gap={gap}
|
|
alignItems={align}
|
|
justifyContent={direction === 'horizontal' ? 'center' : 'start'}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|