website refactor

apps/website/components/layout/NavLink.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Link from 'next/link';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { LucideIcon } from 'lucide-react';
+
+interface NavLinkProps {
+  href: string;
+  label: string;
+  icon?: LucideIcon;
+  isActive?: boolean;
+  variant?: 'sidebar' | 'top';
+}
+
+/**
+ * NavLink provides a consistent link component for navigation.
+ * Supports both sidebar and top navigation variants.
+ */
+export function NavLink({ href, label, icon: Icon, isActive, variant = 'sidebar' }: NavLinkProps) {
+  if (variant === 'top') {
+    return (
+      <Box
+        as={Link}
+        href={href}
+        display="flex"
+        alignItems="center"
+        gap={2}
+        px={3}
+        py={2}
+        transition
+        color={isActive ? 'primary-accent' : 'text-gray-400'}
+        hoverTextColor="white"
+      >
+        {Icon && <Icon size={18} />}
+        <Text size="sm" weight={isActive ? 'bold' : 'medium'}>
+          {label}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      as={Link}
+      href={href}
+      display="flex"
+      alignItems="center"
+      gap={3}
+      px={3}
+      py={2}
+      rounded="md"
+      transition
+      bg={isActive ? 'primary-accent/10' : 'transparent'}
+      color={isActive ? 'primary-accent' : 'text-gray-400'}
+      hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
+      hoverTextColor={isActive ? 'primary-accent' : 'white'}
+      group
+    >
+      {Icon && <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />}
+      <Text weight="medium">{label}</Text>
+      {isActive && (
+        <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
+      )}
+    </Box>
+  );
+}