37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React, { ElementType } from 'react';
|
|
import { Box, BoxProps } from './Box';
|
|
|
|
/**
|
|
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
|
*
|
|
* GridItem is for items inside a Grid container.
|
|
*
|
|
* - DO NOT add positioning props (absolute, top, zIndex).
|
|
* - DO NOT add background/border props.
|
|
*
|
|
* If you need a more specific layout, create a new component in apps/website/components.
|
|
*/
|
|
|
|
export interface GridItemProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
|
|
children?: React.ReactNode;
|
|
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
className?: string;
|
|
}
|
|
|
|
export function GridItem<T extends ElementType = 'div'>({ children, colSpan, mdSpan, lgSpan, className = '', ...props }: GridItemProps<T>) {
|
|
const spanClasses = [
|
|
colSpan ? `col-span-${colSpan}` : '',
|
|
mdSpan ? `md:col-span-${mdSpan}` : '',
|
|
lgSpan ? `lg:col-span-${lgSpan}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={spanClasses} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|