website refactor

apps/website/ui/Panel.tsx

@@ -12,6 +12,11 @@ export interface PanelProps {
   variant?: 'default' | 'dark' | 'muted';
   padding?: Spacing;
   actions?: ReactNode;
+  className?: string;
+  border?: boolean;
+  rounded?: string;
+  borderColor?: string;
+  bg?: string;
 }
 
 export const Panel = ({ 
@@ -21,10 +26,23 @@ export const Panel = ({
   footer,
   variant = 'default',
   padding = 6,
-  actions
+  actions,
+  className,
+  border,
+  rounded,
+  borderColor,
+  bg
 }: PanelProps) => {
   return (
-    <Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
+    <Surface 
+      variant={variant} 
+      rounded={(rounded as any) || "lg"} 
+      style={{ 
+        border: border === false ? 'none' : `1px solid ${borderColor || 'var(--ui-color-border-default)'}`,
+        backgroundColor: bg ? (bg.startsWith('bg-') ? undefined : bg) : undefined
+      }}
+      className={className}
+    >
       {(title || description || actions) && (
         <Box padding={padding as any} borderBottom display="flex" alignItems="center" justifyContent="between">
           <Box>