55 lines
1.3 KiB
TypeScript
55 lines
1.3 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>;
|
|
mdCols?: number;
|
|
lgCols?: number;
|
|
}
|
|
|
|
export const Grid = forwardRef(<T extends ElementType = 'div'>(
|
|
{
|
|
children,
|
|
cols = 1,
|
|
gap = 4,
|
|
as,
|
|
mdCols,
|
|
lgCols,
|
|
...props
|
|
}: GridProps<T>,
|
|
ref: ForwardedRef<HTMLElement>
|
|
) => {
|
|
const finalCols = typeof cols === 'object' ? { ...cols } : { base: cols };
|
|
if (mdCols) finalCols.md = mdCols;
|
|
if (lgCols) finalCols.lg = lgCols;
|
|
|
|
return (
|
|
<Box
|
|
as={as}
|
|
ref={ref}
|
|
display="grid"
|
|
gridCols={finalCols}
|
|
gap={gap}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Grid.displayName = 'Grid';
|