website refactor

apps/website/ui/Text.tsx

@@ -1,6 +1,8 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 
-interface TextProps {
+type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+
+interface TextProps extends HTMLAttributes<HTMLSpanElement> {
   children: ReactNode;
   className?: string;
   size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
@@ -9,6 +11,12 @@ interface TextProps {
   font?: 'mono' | 'sans';
   align?: 'left' | 'center' | 'right';
   truncate?: boolean;
+  style?: React.CSSProperties;
+  block?: boolean;
+  ml?: Spacing;
+  mr?: Spacing;
+  mt?: Spacing;
+  mb?: Spacing;
 }
 
 export function Text({ 
@@ -19,7 +27,11 @@ export function Text({
   color = '',
   font = 'sans',
   align = 'left',
-  truncate = false
+  truncate = false,
+  style,
+  block = false,
+  ml, mr, mt, mb,
+  ...props
 }: TextProps) {
   const sizeClasses = {
     xs: 'text-xs',
@@ -49,16 +61,28 @@ export function Text({
     center: 'text-center',
     right: 'text-right'
   };
+
+  const spacingMap: Record<number, string> = {
+    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
+    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
+    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
+    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
+  };
   
   const classes = [
+    block ? 'block' : 'inline',
     sizeClasses[size],
     weightClasses[weight],
     fontClasses[font],
     alignClasses[align],
     color,
     truncate ? 'truncate' : '',
+    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
+    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
+    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
+    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
     className
   ].filter(Boolean).join(' ');
   
-  return <span className={classes}>{children}</span>;
-}
+  return <span className={classes} style={style} {...props}>{children}</span>;
+}