website refactor

apps/website/ui/QuickActionItem.tsx

@@ -0,0 +1,51 @@
+
+
+import { ChevronRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { Text } from './Text';
+
+interface QuickActionItemProps {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  iconVariant?: 'blue' | 'amber' | 'purple' | 'green';
+}
+
+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)',
+  };
+
+  const variantBgs = {
+    blue: 'bg-primary-blue/10',
+    amber: 'bg-warning-amber/10',
+    purple: 'bg-purple-500/10',
+    green: 'bg-performance-green/10',
+  };
+
+  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]} />
+        </Box>
+        <Text size="sm" color="text-white" weight="medium">{label}</Text>
+        <Icon icon={ChevronRight} size={4} color="rgb(107, 114, 128)" ml="auto" />
+      </Box>
+    </Link>
+  );
+}