website refactor

apps/website/ui/Panel.tsx

@@ -1,94 +1,100 @@
-import { ReactNode } from 'react';
-import { Heading } from './Heading';
-import { Text } from './Text';
+import React, { ReactNode, CSSProperties } from 'react';
+import { Spacing } from './Box';
 
 export interface PanelProps {
-  title?: string;
-  description?: string;
   children: ReactNode;
-  footer?: ReactNode;
-  variant?: 'default' | 'muted' | 'ghost' | 'dark' | any;
-  padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
+  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated';
+  padding?: Spacing | number;
+  onClick?: () => void;
+  style?: CSSProperties;
+  title?: string | ReactNode;
   actions?: ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
+  description?: string;
+  footer?: ReactNode;
   border?: boolean;
   rounded?: string;
+  className?: string;
   borderColor?: string;
   bg?: string;
 }
 
-/**
- * Panel - Redesigned for "Modern Precision" theme.
- * Includes compatibility props to prevent app-wide breakage.
- */
-export const Panel = ({ 
-  title, 
-  description, 
+export function Panel({ 
   children, 
-  footer,
-  variant = 'default',
+  variant = 'default', 
   padding = 'md',
-  actions,
-  className,
+  onClick,
   style,
+  title,
+  actions,
+  description,
+  footer,
   border,
   rounded,
-  borderColor,
-  bg,
-}: PanelProps) => {
+  className
+}: PanelProps) {
   const variantClasses = {
-    default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
-    muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
-    ghost: 'bg-transparent border-transparent',
-    dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
+    default: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-sm',
+    muted: 'bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-muted)]',
+    outline: 'bg-transparent border border-[var(--ui-color-border-default)]',
+    glass: 'bg-white/[0.03] backdrop-blur-md border border-white/[0.05]',
+    dark: 'bg-[var(--ui-color-bg-base)] border border-[var(--ui-color-border-default)]',
+    precision: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
+    bordered: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)]',
+    elevated: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-md',
   };
 
   const paddingClasses = {
     none: 'p-0',
-    sm: 'p-2',
-    md: 'p-4',
-    lg: 'p-8',
+    xs: 'p-2',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-10',
   };
 
-  const getPaddingClass = (pad: any) => {
-    if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
-    return ''; // Handled in style
+  const getPaddingClass = (p: any) => {
+    if (typeof p === 'string') return `p-${p}`;
+    return '';
   };
 
-  const combinedStyle: React.CSSProperties = {
-    ...style,
-    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
-    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
-    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
-    ...(border === false ? { border: 'none' } : {}),
-  };
+  const interactiveClasses = onClick 
+    ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200 ease-in-out active:scale-[0.99]' 
+    : '';
 
   return (
-    <div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}>
-      {(title || description || actions) && (
-        <div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}>
-          <div>
-            {title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>}
-            {description && <Text size="xs" variant="low">{description}</Text>}
-          </div>
-          {actions && (
-            <div className="flex items-center gap-2">
-              {actions}
+    <div 
+      className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
+      onClick={onClick}
+      style={{
+        ...style,
+        ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
+      }}
+    >
+      {(title || actions) && (
+        <div className="flex items-center justify-between mb-6 border-b border-[var(--ui-color-border-muted)] pb-4">
+          {title && (
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <div className="w-1 h-4 bg-[var(--ui-color-intent-primary)]" />
+                <h3 className="text-xs font-bold uppercase tracking-widest text-[var(--ui-color-text-high)]">
+                  {title}
+                </h3>
+              </div>
+              {description && (
+                <p className="text-[10px] text-[var(--ui-color-text-low)] uppercase mono ml-3">
+                  {description}
+                </p>
+              )}
             </div>
           )}
+          {actions && <div>{actions}</div>}
         </div>
       )}
-      
-      <div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
-        {children}
-      </div>
-      
+      {children}
       {footer && (
-        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
+        <div className="mt-6 pt-4 border-t border-[var(--ui-color-border-muted)]">
           {footer}
         </div>
       )}
     </div>
   );
-};
+}