44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
|
|
import { Box, BoxProps, ResponsiveValue } from './Box';
|
|
|
|
export interface GridItemProps<T extends ElementType> extends BoxProps<T> {
|
|
as?: T;
|
|
children?: ReactNode;
|
|
colSpan?: number | ResponsiveValue<number>;
|
|
rowSpan?: number | ResponsiveValue<number>;
|
|
mdSpan?: number;
|
|
lgSpan?: number;
|
|
}
|
|
|
|
export const GridItem = forwardRef(<T extends ElementType = 'div'>(
|
|
{
|
|
children,
|
|
colSpan,
|
|
rowSpan,
|
|
as,
|
|
mdSpan,
|
|
lgSpan,
|
|
...props
|
|
}: GridItemProps<T>,
|
|
ref: ForwardedRef<HTMLElement>
|
|
) => {
|
|
const finalColSpan = typeof colSpan === 'object' ? { ...colSpan } : { base: colSpan };
|
|
if (mdSpan) finalColSpan.md = mdSpan;
|
|
if (lgSpan) finalColSpan.lg = lgSpan;
|
|
|
|
return (
|
|
<Box
|
|
as={as}
|
|
ref={ref}
|
|
colSpan={finalColSpan as any}
|
|
// rowSpan is not directly supported by Box yet, but we can add it if needed
|
|
// or use style
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
GridItem.displayName = 'GridItem';
|