89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/utils/cn';
|
|
|
|
export const Grid: React.FC<
|
|
React.HTMLAttributes<HTMLDivElement> & { columns: number }
|
|
> = ({ className, columns, children, ...props }) => (
|
|
<div className={cn('card', className)}>
|
|
<div className="relative w-full overflow-auto rounded-md">
|
|
<div
|
|
className={cn('grid w-full')}
|
|
style={{
|
|
gridTemplateColumns: `repeat(${columns}, auto)`,
|
|
width: 'max-content',
|
|
minWidth: '100%',
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const GridHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}) => (
|
|
<div className={cn('contents', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const GridBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}) => (
|
|
<div
|
|
className={cn('contents [&>*:last-child]:border-0', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const GridCell: React.FC<
|
|
React.HTMLAttributes<HTMLDivElement> & {
|
|
as?: React.ElementType;
|
|
colSpan?: number;
|
|
isHeader?: boolean;
|
|
}
|
|
> = ({
|
|
className,
|
|
children,
|
|
as: Component = 'div',
|
|
colSpan,
|
|
isHeader,
|
|
...props
|
|
}) => (
|
|
<Component
|
|
className={cn(
|
|
'flex h-12 items-center whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border',
|
|
isHeader && 'h-10 bg-def-100 font-semibold text-muted-foreground',
|
|
colSpan && `col-span-${colSpan}`,
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
|
|
export const GridRow: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}) => (
|
|
<div
|
|
className={cn(
|
|
'contents transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|