website refactor

apps/website/ui/Card.tsx

@@ -1,73 +1,151 @@
 import React, { ReactNode, forwardRef } from 'react';
-import { Box } from './Box';
-import { Surface, SurfaceProps } from './Surface';
+import { Heading } from './Heading';
 
-export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
+export interface CardProps {
   children: ReactNode;
-  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
-  title?: ReactNode;
+  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | any;
+  title?: string | ReactNode;
   footer?: ReactNode;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
+  className?: string;
+  style?: React.CSSProperties;
+  bg?: string;
+  p?: number;
+  onClick?: () => void;
+  responsiveColSpan?: { lg: number };
+  overflow?: string;
+  rounded?: string | boolean;
+  borderLeft?: boolean;
+  borderColor?: string;
+  center?: boolean;
+  transition?: string | boolean;
+  hoverBorderColor?: string;
+  border?: boolean;
+  position?: string;
+  mb?: number;
+  display?: string;
+  alignItems?: string;
+  gap?: number;
+  py?: number;
+  backgroundColor?: string;
 }
 
+/**
+ * Card - Redesigned for "Modern Precision" theme.
+ * Includes extensive compatibility props to prevent app-wide breakage.
+ */
 export const Card = forwardRef<HTMLDivElement, CardProps>(({ 
   children, 
   variant = 'default',
   title,
   footer,
-  ...props
+  padding = 'md',
+  className,
+  style,
+  bg,
+  p,
+  onClick,
+  responsiveColSpan,
+  overflow,
+  rounded,
+  borderLeft,
+  borderColor,
+  center,
+  transition,
+  hoverBorderColor,
+  border,
+  position,
+  mb,
+  display,
+  alignItems,
+  gap,
+  py,
+  backgroundColor,
 }, ref) => {
-  const isOutline = variant === 'outline';
-  
-  const style: React.CSSProperties = isOutline ? {
-    backgroundColor: 'transparent',
-    border: '1px solid var(--ui-color-border-default)',
-  } : {};
+  const variantClasses = {
+    default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-sm',
+    muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
+    outline: 'bg-transparent border-[var(--ui-color-border-default)]',
+    glass: 'bg-white/[0.03] backdrop-blur-md border-white/[0.05]',
+    dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
+  };
+
+  const paddingClasses = {
+    none: 'p-0',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-8',
+  };
+
+  const getPaddingClass = (pad: any) => {
+    if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
+    return ''; // Handled in style
+  };
+
+  const combinedStyle: React.CSSProperties = {
+    ...style,
+    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(backgroundColor ? { backgroundColor } : {}),
+    ...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
+    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
+    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
+    ...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
+    ...(overflow ? { overflow } : {}),
+    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
+    ...(borderLeft ? { borderLeft: `4px solid ${borderColor || 'var(--ui-color-intent-primary)'}` } : {}),
+    ...(center ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
+    ...(typeof transition === 'string' ? { transition } : {}),
+    ...(position ? { position: position as any } : {}),
+    ...(mb !== undefined ? { marginBottom: `${mb * 0.25}rem` } : {}),
+    ...(display ? { display } : {}),
+    ...(alignItems ? { alignItems } : {}),
+    ...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
+    ...(border === false ? { border: 'none' } : {}),
+  };
 
   return (
-    <Surface 
+    <div 
       ref={ref}
-      variant={isOutline ? 'default' : variant}
-      rounded="lg"
-      shadow="md"
-      style={style}
-      {...props}
+      className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} ${onClick ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)]' : ''} ${transition === true ? 'transition-all duration-200' : ''} ${rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none')} ${className || ''}`}
+      style={combinedStyle}
+      onClick={onClick}
     >
       {title && (
-        <Box padding={4} borderBottom>
+        <div className={`border-b border-[var(--ui-color-border-muted)] ${getPaddingClass(padding)}`}>
           {typeof title === 'string' ? (
-            <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>
+            <Heading level={5} weight="bold" uppercase>{title}</Heading>
           ) : title}
-        </Box>
+        </div>
       )}
       
-      <Box padding={4}>
+      <div className={typeof padding === 'number' || p !== undefined ? '' : getPaddingClass(padding)}>
         {children}
-      </Box>
+      </div>
       
       {footer && (
-        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
           {footer}
-        </Box>
+        </div>
       )}
-    </Surface>
+    </div>
   );
 });
 
 Card.displayName = 'Card';
 
 export const CardHeader = ({ title, children }: { title?: string, children?: ReactNode }) => (
-  <Box marginBottom={4}>
-    {title && <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>}
+  <div className="mb-4">
+    {title && <Heading level={5} weight="bold" uppercase>{title}</Heading>}
     {children}
-  </Box>
+  </div>
 );
 
 export const CardContent = ({ children }: { children: ReactNode }) => (
-  <Box>{children}</Box>
+  <div>{children}</div>
 );
 
 export const CardFooter = ({ children }: { children: ReactNode }) => (
-  <Box marginTop={4} paddingTop={4} borderTop>
+  <div className="mt-4 pt-4 border-t border-[var(--ui-color-border-muted)]">
     {children}
-  </Box>
+  </div>
 );