website refactor
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Box } from './Box';
|
||||
import React, { ElementType } from 'react';
|
||||
import { Box, BoxProps } from './Box';
|
||||
|
||||
/**
|
||||
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
||||
@@ -12,15 +12,15 @@ import { Box } from './Box';
|
||||
* If you need a more specific layout, create a new component in apps/website/components.
|
||||
*/
|
||||
|
||||
export interface GridItemProps {
|
||||
children: React.ReactNode;
|
||||
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({ children, colSpan, mdSpan, lgSpan, className = '' }: GridItemProps) {
|
||||
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}` : '',
|
||||
@@ -29,7 +29,7 @@ export function GridItem({ children, colSpan, mdSpan, lgSpan, className = '' }:
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<Box className={spanClasses}>
|
||||
<Box className={spanClasses} {...props}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user