website refactor

apps/website/ui/QuickActionsPanel.tsx

@@ -5,42 +5,37 @@ import { Button } from './Button';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface QuickAction {
+export interface QuickAction {
   label: string;
   icon: LucideIcon;
   onClick: () => void;
-  variant?: 'primary' | 'secondary' | 'ghost';
+  intent?: 'primary' | 'secondary' | 'danger';
 }
 
-interface QuickActionsPanelProps {
+export interface QuickActionsPanelProps {
   actions: QuickAction[];
-  className?: string;
 }
 
-/**
- * QuickActionsPanel
- * 
- * Provides fast access to common dashboard tasks.
- */
-export function QuickActionsPanel({ actions, className = '' }: QuickActionsPanelProps) {
+export const QuickActionsPanel = ({ 
+  actions 
+}: QuickActionsPanelProps) => {
   return (
-    <Panel title="Quick Actions" className={className}>
-      <Box display="grid" gridCols={1} gap={2}>
+    <Panel title="Quick Actions">
+      <Box display="flex" flexDirection="col" gap={2}>
         {actions.map((action, index) => (
-          <Button
-            key={index}
-            variant={action.variant || 'secondary'}
+          <Button 
+            key={index} 
+            variant={action.intent === 'danger' ? 'danger' : '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 display="flex" alignItems="center" gap={3} fullWidth>
+              <Icon icon={action.icon} size={4} />
+              {action.label}
             </Box>
           </Button>
         ))}
       </Box>
     </Panel>
   );
-}
+};