website refactor

apps/website/ui/SidebarActionLink.tsx

@@ -1,37 +1,66 @@
 import React from 'react';
-import { ChevronRight, LucideIcon } from 'lucide-react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
+import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Link } from './Link';
 
-interface SidebarActionLinkProps {
-  href: string;
-  icon: LucideIcon;
+export interface SidebarActionLinkProps {
   label: string;
-  iconColor?: string;
-  iconBgColor?: string;
+  icon: LucideIcon;
+  href: string;
+  isActive?: boolean;
 }
 
-export function SidebarActionLink({
+export const SidebarActionLink = ({ 
+  label, 
+  icon, 
   href,
-  icon,
-  label,
-  iconColor = 'text-primary-blue',
-  iconBgColor = 'bg-primary-blue/10',
-}: SidebarActionLinkProps) {
+  isActive = false 
+}: 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"
+    <Link 
+      href={href} 
+      variant="ghost" 
+      underline="none"
     >
-      <Box p={2} className={iconBgColor} rounded="lg" display="flex" center>
-        <Icon icon={icon} size={4} className={iconColor} />
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={3} 
+        padding={3} 
+        rounded="lg"
+        bg={isActive ? 'var(--ui-color-bg-surface-muted)' : 'transparent'}
+        className="group hover:bg-white/5 transition-colors"
+      >
+        <Box 
+          padding={2} 
+          rounded="md" 
+          bg={isActive ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
+          display="flex"
+          center
+        >
+          <Icon 
+            icon={icon} 
+            size={4} 
+            intent={isActive ? 'high' : 'low'} 
+          />
+        </Box>
+        <Text 
+          size="sm" 
+          variant={isActive ? 'high' : 'med'} 
+          weight={isActive ? 'bold' : 'medium'}
+          flexGrow={1}
+        >
+          {label}
+        </Text>
+        <Icon 
+          icon={ChevronRight} 
+          size={4} 
+          intent="low" 
+          className="opacity-0 group-hover:opacity-100 transition-opacity"
+        />
       </Box>
-      <Text size="sm" color="text-white" flexGrow={1}>{label}</Text>
-      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
     </Link>
   );
-}
+};