website refactor

apps/website/ui/Text.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Box, BoxProps } from './Box';
+import { BoxProps } from './Box';
 
 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;
 
@@ -42,10 +42,19 @@ interface TextProps<T extends ElementType = 'span'> extends Omit<BoxProps<T>, 'c
   style?: React.CSSProperties;
   block?: boolean;
   italic?: boolean;
-  ml?: Spacing | any;
-  mr?: Spacing | any;
-  mt?: Spacing | any;
-  mb?: Spacing | any;
+  ml?: Spacing | ResponsiveSpacing;
+  mr?: Spacing | ResponsiveSpacing;
+  mt?: Spacing | ResponsiveSpacing;
+  mb?: Spacing | ResponsiveSpacing;
+}
+
+interface ResponsiveSpacing {
+  base?: Spacing;
+  sm?: Spacing;
+  md?: Spacing;
+  lg?: Spacing;
+  xl?: Spacing;
+  '2xl'?: Spacing;
 }
 
 export function Text<T extends ElementType = 'span'>({ 
@@ -146,6 +155,21 @@ export function Text<T extends ElementType = 'span'>({
     loose: 'leading-loose'
   };
   
+  const getSpacingClass = (prefix: string, value: Spacing | ResponsiveSpacing | undefined) => {
+    if (value === undefined) return '';
+    if (typeof value === 'object') {
+      const classes = [];
+      if (value.base !== undefined) classes.push(`${prefix}-${spacingMap[value.base as number]}`);
+      if (value.sm !== undefined) classes.push(`sm:${prefix}-${spacingMap[value.sm as number]}`);
+      if (value.md !== undefined) classes.push(`md:${prefix}-${spacingMap[value.md as number]}`);
+      if (value.lg !== undefined) classes.push(`lg:${prefix}-${spacingMap[value.lg as number]}`);
+      if (value.xl !== undefined) classes.push(`xl:${prefix}-${spacingMap[value.xl as number]}`);
+      if (value['2xl'] !== undefined) classes.push(`2xl:${prefix}-${spacingMap[value['2xl'] as number]}`);
+      return classes.join(' ');
+    }
+    return `${prefix}-${spacingMap[value as number]}`;
+  };
+  
   const classes = [
     block ? 'block' : 'inline',
     getSizeClasses(size),
@@ -158,10 +182,10 @@ export function Text<T extends ElementType = 'span'>({
     uppercase ? 'uppercase' : '',
     italic ? 'italic' : '',
     letterSpacing === '0.05em' ? 'tracking-wider' : letterSpacing ? `tracking-${letterSpacing}` : '',
-    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
-    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
-    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
-    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
+    getSpacingClass('ml', ml),
+    getSpacingClass('mr', mr),
+    getSpacingClass('mt', mt),
+    getSpacingClass('mb', mb),
     className
   ].filter(Boolean).join(' ');