26 lines
696 B
TypeScript
26 lines
696 B
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface GridItemProps {
|
|
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) {
|
|
const spanClasses = [
|
|
colSpan ? `col-span-${colSpan}` : '',
|
|
mdSpan ? `md:col-span-${mdSpan}` : '',
|
|
lgSpan ? `lg:col-span-${lgSpan}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={spanClasses}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|