website refactor

apps/website/ui/Text.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+
+interface TextProps {
+  children: ReactNode;
+  className?: string;
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  color?: string;
+  font?: 'mono' | 'sans';
+  align?: 'left' | 'center' | 'right';
+  truncate?: boolean;
+}
+
+export function Text({ 
+  children, 
+  className = '', 
+  size = 'base',
+  weight = 'normal',
+  color = '',
+  font = 'sans',
+  align = 'left',
+  truncate = false
+}: TextProps) {
+  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 = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold'
+  };
+  
+  const fontClasses = {
+    mono: 'font-mono',
+    sans: 'font-sans'
+  };
+  
+  const alignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+  };
+  
+  const classes = [
+    sizeClasses[size],
+    weightClasses[weight],
+    fontClasses[font],
+    alignClasses[align],
+    color,
+    truncate ? 'truncate' : '',
+    className
+  ].filter(Boolean).join(' ');
+  
+  return <span className={classes}>{children}</span>;
+}