website refactor

apps/website/ui/SidebarActionLink.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ChevronRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { Stack } from './Stack';
+
+interface SidebarActionLinkProps {
+  href: string;
+  icon: LucideIcon;
+  label: string;
+  iconColor?: string;
+  iconBgColor?: string;
+}
+
+export function SidebarActionLink({
+  href,
+  icon,
+  label,
+  iconColor = 'text-primary-blue',
+  iconBgColor = 'bg-primary-blue/10',
+}: SidebarActionLinkProps) {
+  return (
+    <Link
+      href={href}
+      variant="ghost"
+      block
+      className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-iron-gray/50 transition-all"
+    >
+      <Box p={2} className={iconBgColor} rounded="lg" display="flex" center>
+        <Icon icon={icon} size={4} className={iconColor} />
+      </Box>
+      <Text size="sm" color="text-white" flexGrow={1}>{label}</Text>
+      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
+    </Link>
+  );
+}