63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface LayoutProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
padding?: string;
|
|
gap?: string;
|
|
grid?: boolean;
|
|
gridCols?: 1 | 2 | 3 | 4;
|
|
flex?: boolean;
|
|
flexCol?: boolean;
|
|
items?: 'start' | 'center' | 'end' | 'stretch';
|
|
justify?: 'start' | 'center' | 'end' | 'between' | 'around';
|
|
}
|
|
|
|
export function Layout({
|
|
children,
|
|
className = '',
|
|
padding = 'p-6',
|
|
gap = 'gap-4',
|
|
grid = false,
|
|
gridCols = 1,
|
|
flex = false,
|
|
flexCol = false,
|
|
items = 'start',
|
|
justify = 'start'
|
|
}: LayoutProps) {
|
|
const baseClasses = [padding, gap, className];
|
|
|
|
if (grid) {
|
|
const gridColsMap = {
|
|
1: 'grid-cols-1',
|
|
2: 'grid-cols-2',
|
|
3: 'grid-cols-3',
|
|
4: 'grid-cols-4'
|
|
};
|
|
baseClasses.push('grid', gridColsMap[gridCols]);
|
|
} else if (flex) {
|
|
baseClasses.push('flex');
|
|
if (flexCol) baseClasses.push('flex-col');
|
|
|
|
const itemsMap = {
|
|
start: 'items-start',
|
|
center: 'items-center',
|
|
end: 'items-end',
|
|
stretch: 'items-stretch'
|
|
};
|
|
baseClasses.push(itemsMap[items]);
|
|
|
|
const justifyMap = {
|
|
start: 'justify-start',
|
|
center: 'justify-center',
|
|
end: 'justify-end',
|
|
between: 'justify-between',
|
|
around: 'justify-around'
|
|
};
|
|
baseClasses.push(justifyMap[justify]);
|
|
}
|
|
|
|
const classes = baseClasses.filter(Boolean).join(' ');
|
|
|
|
return <div className={classes}>{children}</div>;
|
|
} |