website refactor

apps/website/ui/NavLink.tsx

@@ -0,0 +1,38 @@
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/primitives/Box';
+import { LucideIcon } from 'lucide-react';
+import { Link } from '@/ui/Link';
+import { Icon } from '@/ui/Icon';
+import React from '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, isActive, variant = 'sidebar' }: NavLinkProps) {
+  const content = (
+    <Box display="flex" alignItems="center" gap={variant === 'top' ? 2 : 3} paddingX={3} paddingY={2} rounded={variant === 'sidebar' ? 'md' : undefined} style={{ transition: 'all 0.2s' }}>
+      {icon && <Icon icon={icon} size={variant === 'top' ? 4 : 5} intent={isActive ? 'primary' : 'low'} />}
+      <Text size="sm" weight={isActive ? 'bold' : 'medium'} variant={isActive ? 'primary' : 'med'}>
+        {label}
+      </Text>
+      {variant === 'sidebar' && isActive && (
+        <Box marginLeft="auto" width="4px" height="1rem" bg="var(--ui-color-intent-primary)" rounded="full" />
+      )}
+    </Box>
+  );
+
+  return (
+    <Link href={href} variant="inherit" underline="none" block={variant === 'sidebar'}>
+      {content}
+    </Link>
+  );
+}