56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
|
|
|
|
interface GridProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
cols?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
gap?: 'sm' | 'md' | 'lg' | 'xl';
|
|
responsive?: {
|
|
sm?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
md?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
lg?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
xl?: 1 | 2 | 3 | 4 | 6 | 12;
|
|
};
|
|
}
|
|
|
|
export function Grid({
|
|
children,
|
|
className = '',
|
|
config = {},
|
|
cols = 1,
|
|
gap = 'md',
|
|
responsive = {}
|
|
}: GridProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
const colsClasses = {
|
|
1: 'grid-cols-1',
|
|
2: 'grid-cols-2',
|
|
3: 'grid-cols-3',
|
|
4: 'grid-cols-4',
|
|
6: 'grid-cols-6',
|
|
12: 'grid-cols-12',
|
|
};
|
|
|
|
const gapClasses = {
|
|
sm: 'gap-2',
|
|
md: 'gap-4',
|
|
lg: 'gap-6',
|
|
xl: 'gap-8',
|
|
};
|
|
|
|
const responsiveClasses = Object.entries(responsive)
|
|
.map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
|
|
.join(' ');
|
|
|
|
return (
|
|
<div
|
|
className={`grid-rtl ${colsClasses[cols]} ${gapClasses[gap]} ${responsiveClasses} ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |