39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
|
|
export interface GridProps {
|
|
children: ReactNode;
|
|
cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
|
|
gap?: number;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const Grid = ({
|
|
children,
|
|
cols = 1,
|
|
gap = 0,
|
|
fullWidth = false
|
|
}: GridProps) => {
|
|
const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
|
|
if (typeof value === 'number') return `grid-cols-${value}`;
|
|
const classes = [];
|
|
if (value.base) classes.push(`grid-cols-${value.base}`);
|
|
if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
|
|
if (value.md) classes.push(`md:grid-cols-${value.md}`);
|
|
if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
|
|
if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
|
|
return classes.join(' ');
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
display="grid"
|
|
className={getGridColsClass(cols)}
|
|
gap={gap}
|
|
fullWidth={fullWidth}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|