website refactor

apps/website/ui/DebugPanel.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './primitives/Box';
+import { Heading } from './Heading';
+import { IconButton } from './IconButton';
+import { X } from 'lucide-react';
+
+export interface DebugPanelProps {
+  title: string;
+  children: ReactNode;
+  onClose: () => void;
+  icon?: ReactNode;
+}
+
+export const DebugPanel = ({ title, children, onClose, icon }: DebugPanelProps) => {
+  return (
+    <Box position="fixed" style={{ bottom: '1rem', left: '1rem', width: '20rem', zIndex: 100 }}>
+      <Card variant="dark" padding={0}>
+        <Box display="flex" alignItems="center" justifyContent="between" padding={3} bg="var(--ui-color-bg-surface-muted)" style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}>
+          <Box display="flex" alignItems="center" gap={2}>
+            {icon}
+            <Heading level={6}>{title}</Heading>
+          </Box>
+          <IconButton icon={X} size="sm" variant="ghost" onClick={onClose} />
+        </Box>
+        <Box padding={3}>
+          {children}
+        </Box>
+      </Card>
+    </Box>
+  );
+};