uup

2026-01-23 20:35:40 +03:00
parent cf3b0e48ec
commit 66c151653e
137 changed files with 41495 additions and 0 deletions
--- a/app/components/ui/Text.tsx
+++ b/app/components/ui/Text.tsx
@@ -0,0 +1,73 @@
+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>
+  );
+}