website refactor

apps/website/ui/Panel.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Surface } from './primitives/Surface';
-import { Box } from './primitives/Box';
+import { Box, Spacing } from './primitives/Box';
 import { Heading } from './Heading';
 import { Text } from './Text';
 
@@ -10,6 +10,8 @@ export interface PanelProps {
   children: ReactNode;
   footer?: ReactNode;
   variant?: 'default' | 'dark' | 'muted';
+  padding?: Spacing;
+  actions?: ReactNode;
 }
 
 export const Panel = ({ 
@@ -17,23 +19,32 @@ export const Panel = ({
   description, 
   children, 
   footer,
-  variant = 'default' 
+  variant = 'default',
+  padding = 6,
+  actions
 }: PanelProps) => {
   return (
     <Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
-      {(title || description) && (
-        <Box padding={6} borderBottom>
-          {title && <Heading level={3} marginBottom={1}>{title}</Heading>}
-          {description && <Text size="sm" variant="low">{description}</Text>}
+      {(title || description || actions) && (
+        <Box padding={padding as any} borderBottom display="flex" alignItems="center" justifyContent="between">
+          <Box>
+            {title && <Heading level={3} marginBottom={1}>{title}</Heading>}
+            {description && <Text size="sm" variant="low">{description}</Text>}
+          </Box>
+          {actions && (
+            <Box display="flex" alignItems="center" gap={3}>
+              {actions}
+            </Box>
+          )}
         </Box>
       )}
       
-      <Box padding={6}>
+      <Box padding={padding as any}>
         {children}
       </Box>
       
       {footer && (
-        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+        <Box padding={padding as any} borderTop bg="rgba(255,255,255,0.02)">
           {footer}
         </Box>
       )}