website refactor

apps/website/ui/Card.tsx

@@ -1,49 +1,73 @@
-import React, { ReactNode, MouseEventHandler } from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import React, { ReactNode, forwardRef } from 'react';
+import { Surface, SurfaceProps } from './primitives/Surface';
+import { Box } from './primitives/Box';
 
-export interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'onClick'> {
+export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
   children: ReactNode;
-  onClick?: MouseEventHandler<HTMLDivElement>;
-  variant?: 'default' | 'outline' | 'ghost' | 'muted' | 'dark' | 'glass';
+  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
+  title?: ReactNode;
+  footer?: ReactNode;
 }
 
-export function Card({ 
+export const Card = forwardRef<HTMLDivElement, CardProps>(({ 
   children, 
-  className = '', 
-  onClick,
   variant = 'default',
+  title,
+  footer,
   ...props
-}: CardProps) {
-  const baseClasses = 'rounded-none transition-all duration-150 ease-smooth';
+}, ref) => {
+  const isOutline = variant === 'outline';
   
-  const variantClasses = {
-    default: 'bg-panel-gray border border-border-gray shadow-card',
-    outline: 'bg-transparent border border-border-gray',
-    ghost: 'bg-transparent border-none',
-    muted: 'bg-panel-gray/40 border border-border-gray',
-    dark: 'bg-graphite-black border border-border-gray',
-    glass: 'bg-graphite-black/60 backdrop-blur-md border border-border-gray'
-  };
+  const style: React.CSSProperties = isOutline ? {
+    backgroundColor: 'transparent',
+    border: '1px solid var(--ui-color-border-default)',
+  } : {};
 
-  const classes = [
-    baseClasses,
-    variantClasses[variant],
-    onClick ? 'cursor-pointer hover:bg-border-gray/30' : '',
-    className
-  ].filter(Boolean).join(' ');
-  
-  // Default padding if none provided
-  const hasPadding = props.p !== undefined || props.px !== undefined || props.py !== undefined || 
-                    props.pt !== undefined || props.pb !== undefined || props.pl !== undefined || props.pr !== undefined;
-  
   return (
-    <Box 
-      className={classes} 
-      onClick={onClick} 
-      p={hasPadding ? undefined : 4}
+    <Surface 
+      ref={ref}
+      variant={isOutline ? 'default' : variant}
+      rounded="lg"
+      shadow="md"
+      style={style}
       {...props}
     >
-      {children}
-    </Box>
+      {title && (
+        <Box padding={4} borderBottom>
+          {typeof title === 'string' ? (
+            <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>
+          ) : title}
+        </Box>
+      )}
+      
+      <Box padding={4}>
+        {children}
+      </Box>
+      
+      {footer && (
+        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+          {footer}
+        </Box>
+      )}
+    </Surface>
   );
-}
+});
+
+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>}
+    {children}
+  </Box>
+);
+
+export const CardContent = ({ children }: { children: ReactNode }) => (
+  <Box>{children}</Box>
+);
+
+export const CardFooter = ({ children }: { children: ReactNode }) => (
+  <Box marginTop={4} paddingTop={4} borderTop>
+    {children}
+  </Box>
+);