87 lines
1.9 KiB
TypeScript
87 lines
1.9 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, BoxProps, ResponsiveValue } from './Box';
|
|
|
|
/**
|
|
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
|
*
|
|
* Grid is for CSS Grid-based layouts.
|
|
*
|
|
* - DO NOT add positioning props (absolute, top, zIndex).
|
|
* - DO NOT add flex props.
|
|
* - DO NOT add background/border props unless it's a specific styled grid.
|
|
*
|
|
* If you need a more specific layout, create a new component in apps/website/components.
|
|
*/
|
|
|
|
export interface GridProps {
|
|
children: ReactNode;
|
|
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
|
mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
|
lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
|
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
|
|
className?: string;
|
|
// Spacing
|
|
m?: number;
|
|
mt?: number;
|
|
mb?: number;
|
|
ml?: number;
|
|
mr?: number;
|
|
p?: number;
|
|
pt?: number;
|
|
pb?: number;
|
|
pl?: number;
|
|
pr?: number;
|
|
px?: number;
|
|
py?: number;
|
|
// Sizing
|
|
w?: string | ResponsiveValue<string>;
|
|
h?: string | ResponsiveValue<string>;
|
|
}
|
|
|
|
export function Grid({
|
|
children,
|
|
cols = 1,
|
|
mdCols,
|
|
lgCols,
|
|
gap = 4,
|
|
className = '',
|
|
...props
|
|
}: GridProps) {
|
|
const colClasses: Record<number, string> = {
|
|
1: 'grid-cols-1',
|
|
2: 'grid-cols-1 md:grid-cols-2',
|
|
3: 'grid-cols-1 md:grid-cols-3',
|
|
4: 'grid-cols-2 md:grid-cols-4',
|
|
5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
|
|
6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
|
|
12: 'grid-cols-12'
|
|
};
|
|
|
|
const gapClasses: Record<number, string> = {
|
|
0: 'gap-0',
|
|
1: 'gap-1',
|
|
2: 'gap-2',
|
|
3: 'gap-3',
|
|
4: 'gap-4',
|
|
6: 'gap-6',
|
|
8: 'gap-8',
|
|
12: 'gap-12',
|
|
16: 'gap-16'
|
|
};
|
|
|
|
const classes = [
|
|
'grid',
|
|
colClasses[cols] || 'grid-cols-1',
|
|
mdCols ? `md:grid-cols-${mdCols}` : '',
|
|
lgCols ? `lg:grid-cols-${lgCols}` : '',
|
|
gapClasses[gap] || 'gap-4',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|