73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { getArabicTextClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
|
|
|
|
interface TextProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
|
|
align?: 'left' | 'center' | 'right' | 'justify';
|
|
as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
}
|
|
|
|
export function Text({
|
|
children,
|
|
className = '',
|
|
config = {},
|
|
size = 'base',
|
|
weight = 'normal',
|
|
color = 'primary',
|
|
align,
|
|
as: Component = 'p'
|
|
}: TextProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
const sizeClasses = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
base: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
'2xl': 'text-2xl',
|
|
'3xl': 'text-3xl',
|
|
'4xl': 'text-4xl',
|
|
};
|
|
|
|
const weightClasses = {
|
|
light: 'font-light',
|
|
normal: 'font-normal',
|
|
medium: 'font-medium',
|
|
semibold: 'font-semibold',
|
|
bold: 'font-bold',
|
|
};
|
|
|
|
const colorClasses = {
|
|
primary: 'text-gray-900 dark:text-gray-100',
|
|
secondary: 'text-gray-600 dark:text-gray-400',
|
|
success: 'text-green-600 dark:text-green-400',
|
|
warning: 'text-amber-600 dark:text-amber-400',
|
|
error: 'text-red-600 dark:text-red-400',
|
|
muted: 'text-gray-500 dark:text-gray-500',
|
|
};
|
|
|
|
const alignClasses = {
|
|
left: layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left',
|
|
center: 'text-center',
|
|
right: layoutConfig.direction === 'rtl' ? 'text-left' : 'text-right',
|
|
justify: 'text-justify',
|
|
};
|
|
|
|
const alignClass = align ? alignClasses[align] : (layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left');
|
|
const arabicClasses = getArabicTextClasses(size as any);
|
|
|
|
return (
|
|
<Component
|
|
className={`${arabicClasses} ${sizeClasses[size]} ${weightClasses[weight]} ${colorClasses[color]} ${alignClass} ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
} |