website refactor

apps/website/ui/QuickActionItem.tsx

@@ -1,51 +1,59 @@
-
-
-import { ChevronRight, LucideIcon } from 'lucide-react';
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Icon } from './Icon';
-import { Link } from './Link';
 import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon, ChevronRight } from 'lucide-react';
+import { Link } from './Link';
 
-interface QuickActionItemProps {
-  href: string;
+export interface QuickActionItemProps {
   label: string;
   icon: LucideIcon;
-  iconVariant?: 'blue' | 'amber' | 'purple' | 'green';
+  href: string;
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
 }
 
-export function QuickActionItem({ href, label, icon, iconVariant = 'blue' }: QuickActionItemProps) {
-  const variantColors = {
-    blue: 'rgb(59, 130, 246)',
-    amber: 'rgb(245, 158, 11)',
-    purple: 'rgb(168, 85, 247)',
-    green: 'rgb(16, 185, 129)',
+export const QuickActionItem = ({ 
+  label, 
+  icon, 
+  href,
+  variant = 'primary' 
+}: QuickActionItemProps) => {
+  const variantBgs = {
+    primary: 'rgba(25, 140, 255, 0.1)',
+    secondary: 'var(--ui-color-bg-surface-muted)',
+    success: 'rgba(111, 227, 122, 0.1)',
+    warning: 'rgba(255, 190, 77, 0.1)',
+    critical: 'rgba(227, 92, 92, 0.1)',
   };
 
-  const variantBgs = {
-    blue: 'bg-primary-blue/10',
-    amber: 'bg-warning-amber/10',
-    purple: 'bg-purple-500/10',
-    green: 'bg-performance-green/10',
+  const variantIntents = {
+    primary: 'primary' as const,
+    secondary: 'med' as const,
+    success: 'success' as const,
+    warning: 'warning' as const,
+    critical: 'critical' as const,
   };
 
   return (
-    <Link
-      href={href}
-      block
-      p={3}
-      rounded="lg"
-      bg="bg-deep-graphite"
-      hoverBorderColor="charcoal-outline/50"
-      transition
-      className="hover:bg-charcoal-outline/50"
-    >
-      <Box display="flex" alignItems="center" gap={3} fullWidth>
-        <Box p={2} bg={variantBgs[iconVariant]} rounded="lg">
-          <Icon icon={icon} size={4} color={variantColors[iconVariant]} />
+    <Link href={href} underline="none">
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={4} 
+        padding={4} 
+        rounded="lg" 
+        bg="var(--ui-color-bg-surface)"
+        style={{ border: '1px solid var(--ui-color-border-default)' }}
+        className="group hover:bg-white/5 transition-colors"
+      >
+        <Box padding={2} bg={variantBgs[variant]} rounded="lg">
+          <Icon icon={icon} size={5} intent={variantIntents[variant] as any} />
         </Box>
-        <Text size="sm" color="text-white" weight="medium">{label}</Text>
-        <Icon icon={ChevronRight} size={4} color="rgb(107, 114, 128)" ml="auto" />
+        <Text weight="medium" variant="high" flexGrow={1}>
+          {label}
+        </Text>
+        <Icon icon={ChevronRight} size={4} intent="low" />
       </Box>
     </Link>
   );
-}
+};