68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Grid } from './primitives/Grid';
|
|
import { Stack } from './primitives/Stack';
|
|
|
|
/**
|
|
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS COMPONENT.
|
|
*
|
|
* Layout is a high-level component for page or section layouts.
|
|
* It should use Grid or Stack primitives internally.
|
|
*
|
|
* If you need a specific layout pattern, create a new component.
|
|
*/
|
|
|
|
interface LayoutProps {
|
|
children: ReactNode;
|
|
padding?: string;
|
|
gap?: string;
|
|
grid?: boolean;
|
|
gridCols?: 1 | 2 | 3 | 4;
|
|
flex?: boolean;
|
|
flexCol?: boolean;
|
|
items?: 'start' | 'center' | 'end' | 'stretch';
|
|
justify?: 'start' | 'center' | 'end' | 'between' | 'around';
|
|
}
|
|
|
|
export function Layout({
|
|
children,
|
|
padding = 'p-6',
|
|
gap = 'gap-4',
|
|
grid = false,
|
|
gridCols = 1,
|
|
flex = false,
|
|
flexCol = false,
|
|
items = 'start',
|
|
justify = 'start'
|
|
}: LayoutProps) {
|
|
if (grid) {
|
|
return (
|
|
<Grid
|
|
cols={gridCols as any}
|
|
className={`${padding} ${gap}`}
|
|
>
|
|
{children}
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
if (flex) {
|
|
return (
|
|
<Stack
|
|
direction={flexCol ? 'col' : 'row'}
|
|
align={items}
|
|
justify={justify}
|
|
className={`${padding} ${gap}`}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box className={`${padding} ${gap}`}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|