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.
97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
import { clsx } from 'clsx';
|
|
import React from 'react';
|
|
|
|
type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
|
|
type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
|
|
type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
|
|
interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
direction?: FlexDirection;
|
|
align?: FlexAlign;
|
|
justify?: FlexJustify;
|
|
wrap?: FlexWrap;
|
|
gap?: FlexGap;
|
|
as?: React.ElementType;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const DIRECTION_MAP: Record<FlexDirection, string> = {
|
|
row: 'flex-row',
|
|
'row-reverse': 'flex-row-reverse',
|
|
col: 'flex-col',
|
|
'col-reverse': 'flex-col-reverse',
|
|
};
|
|
|
|
const ALIGN_MAP: Record<FlexAlign, string> = {
|
|
start: 'items-start',
|
|
center: 'items-center',
|
|
end: 'items-end',
|
|
stretch: 'items-stretch',
|
|
baseline: 'items-baseline',
|
|
};
|
|
|
|
const JUSTIFY_MAP: Record<FlexJustify, string> = {
|
|
start: 'justify-start',
|
|
center: 'justify-center',
|
|
end: 'justify-end',
|
|
between: 'justify-between',
|
|
around: 'justify-around',
|
|
evenly: 'justify-evenly',
|
|
};
|
|
|
|
const WRAP_MAP: Record<FlexWrap, string> = {
|
|
wrap: 'flex-wrap',
|
|
'wrap-reverse': 'flex-wrap-reverse',
|
|
nowrap: 'flex-nowrap',
|
|
};
|
|
|
|
const GAP_MAP: Record<FlexGap, 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 Flex = React.forwardRef<HTMLDivElement, FlexProps>(
|
|
(
|
|
{
|
|
direction = 'row',
|
|
align = 'stretch',
|
|
justify = 'start',
|
|
wrap = 'nowrap',
|
|
gap = 'md',
|
|
as: Component = 'div',
|
|
className,
|
|
children,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const classes = clsx(
|
|
'flex',
|
|
DIRECTION_MAP[direction],
|
|
ALIGN_MAP[align],
|
|
JUSTIFY_MAP[justify],
|
|
WRAP_MAP[wrap],
|
|
GAP_MAP[gap],
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Component ref={ref} className={classes} {...props}>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|
|
);
|
|
|
|
Flex.displayName = 'Flex';
|
|
|
|
export default Flex;
|