wip

apps/website/ui/Surface.tsx

@@ -1,17 +1,20 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
-import { Box } from './Box';
+import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Box, BoxProps } from './Box';
 
-interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
+  as?: T;
   children: ReactNode;
-  variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple';
+  variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
   border?: boolean;
   padding?: number;
   className?: string;
   display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
 }
 
-export function Surface({ 
+export function Surface<T extends ElementType = 'div'>({ 
+  as,
   children, 
   variant = 'default',
   rounded = 'lg',
@@ -19,19 +22,32 @@ export function Surface({
   padding = 0,
   className = '',
   display,
+  shadow = 'none',
   ...props 
-}: SurfaceProps) {
-  const variantClasses = {
+}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
+  const variantClasses: Record<string, string> = {
     default: 'bg-iron-gray',
     muted: 'bg-iron-gray/50',
     dark: 'bg-deep-graphite',
     glass: 'bg-deep-graphite/60 backdrop-blur-md',
     'gradient-blue': 'bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite',
     'gradient-gold': 'bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite',
-    'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite'
+    'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite',
+    'gradient-green': 'bg-gradient-to-br from-green-600/20 via-iron-gray/80 to-deep-graphite',
+    'discord': 'bg-gradient-to-b from-deep-graphite to-iron-gray',
+    'discord-inner': 'bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray'
   };
 
-  const roundedClasses = {
+  const shadowClasses: Record<string, string> = {
+    none: '',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
+  };
+
+  const roundedClasses: Record<string, string> = {
     none: 'rounded-none',
     sm: 'rounded-sm',
     md: 'rounded-md',
@@ -58,6 +74,7 @@ export function Surface({
     roundedClasses[rounded],
     border ? 'border border-charcoal-outline' : '',
     paddingClasses[padding] || 'p-0',
+    shadowClasses[shadow],
     display ? display : '',
     className
   ].filter(Boolean).join(' ');