mirror of
https://github.com/SamyRai/turash.git
synced 2025-12-26 23:01:33 +00:00
6347f42e20
- Remove nested git repository from bugulma/frontend/.git - Add all frontend files to main repository tracking - Convert from separate frontend/backend repos to unified monorepo - Preserve all frontend code and development history as tracked files - Eliminate nested repository complexity for simpler development workflow This creates a proper monorepo structure with frontend and backend coexisting in the same repository for easier development and deployment.
85 lines
1.8 KiB
TypeScript
85 lines
1.8 KiB
TypeScript
import { clsx } from 'clsx';
|
|
import React from 'react';
|
|
|
|
type StackDirection = 'vertical' | 'horizontal';
|
|
type StackAlign = 'start' | 'center' | 'end' | 'stretch';
|
|
type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
type StackSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
|
|
interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
direction?: StackDirection;
|
|
align?: StackAlign;
|
|
justify?: StackJustify;
|
|
spacing?: StackSpacing;
|
|
wrap?: boolean;
|
|
as?: React.ElementType;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const SPACING_MAP: Record<StackSpacing, string> = {
|
|
none: 'gap-0',
|
|
xs: 'gap-2',
|
|
sm: 'gap-3',
|
|
md: 'gap-4',
|
|
lg: 'gap-6',
|
|
xl: 'gap-8',
|
|
'2xl': 'gap-12',
|
|
'3xl': 'gap-16',
|
|
};
|
|
|
|
const ALIGN_MAP: Record<StackAlign, string> = {
|
|
start: 'items-start',
|
|
center: 'items-center',
|
|
end: 'items-end',
|
|
stretch: 'items-stretch',
|
|
};
|
|
|
|
const JUSTIFY_MAP: Record<StackJustify, string> = {
|
|
start: 'justify-start',
|
|
center: 'justify-center',
|
|
end: 'justify-end',
|
|
between: 'justify-between',
|
|
around: 'justify-around',
|
|
evenly: 'justify-evenly',
|
|
};
|
|
|
|
const Stack = React.forwardRef<HTMLDivElement, StackProps>(
|
|
(
|
|
{
|
|
direction = 'vertical',
|
|
align = 'stretch',
|
|
justify = 'start',
|
|
spacing = 'md',
|
|
wrap = false,
|
|
as: Component = 'div',
|
|
className,
|
|
children,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const classes = clsx(
|
|
'flex',
|
|
{
|
|
'flex-col': direction === 'vertical',
|
|
'flex-row': direction === 'horizontal',
|
|
'flex-wrap': wrap,
|
|
},
|
|
ALIGN_MAP[align],
|
|
JUSTIFY_MAP[justify],
|
|
SPACING_MAP[spacing],
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Component ref={ref} className={classes} {...props}>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|
|
);
|
|
|
|
Stack.displayName = 'Stack';
|
|
|
|
export default Stack;
|