47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
|
|
import { Box, BoxProps, ResponsiveValue } from './Box';
|
|
|
|
/**
|
|
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
|
*
|
|
* Grid is for grid-based layouts.
|
|
*
|
|
* - DO NOT add positioning props (absolute, top, zIndex).
|
|
* - 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> extends BoxProps<T> {
|
|
as?: T;
|
|
children?: ReactNode;
|
|
cols?: number | ResponsiveValue<number>;
|
|
gap?: number | string | ResponsiveValue<number | string>;
|
|
}
|
|
|
|
export const Grid = forwardRef(<T extends ElementType = 'div'>(
|
|
{
|
|
children,
|
|
cols = 1,
|
|
gap = 4,
|
|
as,
|
|
...props
|
|
}: GridProps<T>,
|
|
ref: ForwardedRef<HTMLElement>
|
|
) => {
|
|
return (
|
|
<Box
|
|
as={as}
|
|
ref={ref}
|
|
display="grid"
|
|
gridCols={cols}
|
|
gap={gap}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Grid.displayName = 'Grid';
|