53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React, { ReactNode, HTMLAttributes } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface GridProps extends HTMLAttributes<HTMLElement> {
|
|
children: ReactNode;
|
|
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
|
|
gap?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function Grid({
|
|
children,
|
|
cols = 1,
|
|
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',
|
|
gapClasses[gap] || 'gap-4',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|