39 lines
966 B
TypeScript
39 lines
966 B
TypeScript
import React, { ReactNode, ElementType } 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<T extends ElementType = 'div'> extends BoxProps<T> {
|
|
children?: ReactNode;
|
|
columns?: number | ResponsiveValue<number>;
|
|
gap?: number | string | ResponsiveValue<number | string>;
|
|
}
|
|
|
|
export function Grid<T extends ElementType = 'div'>({
|
|
children,
|
|
columns = 1,
|
|
gap = 4,
|
|
...props
|
|
}: GridProps<T>) {
|
|
return (
|
|
<Box
|
|
display="grid"
|
|
gridCols={columns}
|
|
gap={gap}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|