website refactor

apps/website/ui/QuickActionsPanel.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Panel } from './Panel';
+import { Box } from './Box';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface QuickAction {
+  label: string;
+  icon: LucideIcon;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+}
+
+interface QuickActionsPanelProps {
+  actions: QuickAction[];
+  className?: string;
+}
+
+/**
+ * QuickActionsPanel
+ * 
+ * Provides fast access to common dashboard tasks.
+ */
+export function QuickActionsPanel({ actions, className = '' }: QuickActionsPanelProps) {
+  return (
+    <Panel title="Quick Actions" className={className}>
+      <Box display="grid" gridCols={1} gap={2}>
+        {actions.map((action, index) => (
+          <Button
+            key={index}
+            variant={action.variant || 'secondary'}
+            onClick={action.onClick}
+            fullWidth
+            style={{ justifyContent: 'flex-start', height: 'auto', padding: '12px' }}
+          >
+            <Box display="flex" align="center" gap={3}>
+              <Icon icon={action.icon} size={5} />
+              <span>{action.label}</span>
+            </Box>
+          </Button>
+        ))}
+      </Box>
+    </Panel>
+  );
+}