website refactor

apps/website/ui/Link.tsx

@@ -1,86 +1,66 @@
-import React, { ReactNode } from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import React, { ReactNode, forwardRef, AnchorHTMLAttributes } from 'react';
 
-export interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'onClick'> {
-  href: string;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   children: ReactNode;
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  rel?: string;
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'inherit';
+  underline?: 'always' | 'hover' | 'none';
+  size?: string;
+  weight?: string;
+  letterSpacing?: string;
   block?: boolean;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | string;
-  truncate?: boolean;
   hoverColor?: string;
   transition?: boolean;
 }
 
-export function Link({ 
-  href, 
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ 
   children, 
-  className = '',
   variant = 'primary',
-  size = 'md',
-  target = '_self',
-  rel = '',
-  onClick,
-  block = false,
+  underline = 'hover',
+  size,
   weight,
-  truncate,
+  letterSpacing,
+  block = false,
   hoverColor,
-  transition,
+  transition = true,
   ...props
-}: LinkProps) {
-  const baseClasses = 'inline-flex items-center transition-colors';
-  
+}, ref) => {
   const variantClasses = {
-    primary: 'text-primary-accent hover:text-primary-accent/80',
-    secondary: 'text-telemetry-aqua hover:text-telemetry-aqua/80',
-    ghost: 'text-gray-400 hover:text-gray-300'
+    primary: 'text-[var(--ui-color-intent-primary)] hover:opacity-80',
+    secondary: 'text-[var(--ui-color-text-med)] hover:text-[var(--ui-color-text-high)]',
+    ghost: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]',
+    inherit: 'text-inherit',
   };
 
-  const sizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-base',
-    lg: 'text-lg'
+  const underlineClasses = {
+    always: 'underline',
+    hover: 'hover:underline',
+    none: 'no-underline',
   };
 
-  const weightClasses: Record<string, string> = {
-    light: 'font-light',
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold'
-  };
-  
   const classes = [
-    block ? 'flex' : baseClasses,
+    transition ? 'transition-all duration-150 ease-in-out' : '',
+    'cursor-pointer',
+    block ? 'block' : 'inline',
     variantClasses[variant],
-    sizeClasses[size],
-    weight && weightClasses[weight] ? weightClasses[weight] : '',
-    truncate ? 'truncate' : '',
-    hoverColor ? `hover:${hoverColor}` : '',
-    transition ? 'transition-all duration-150' : '',
-    className
-  ].filter(Boolean).join(' ');
-  
+    underlineClasses[underline],
+  ].join(' ');
+
+  const style: React.CSSProperties = {
+    ...(size ? { fontSize: size } : {}),
+    ...(weight ? { fontWeight: weight } : {}),
+    ...(letterSpacing ? { letterSpacing } : {}),
+  };
+
   return (
-    <Box 
-      as="a"
-      href={href} 
+    <a
+      ref={ref}
       className={classes}
-      target={target}
-      rel={rel}
-      onClick={onClick}
-      style={{
-        ...(weight && !weightClasses[weight] ? { fontWeight: weight } : {}),
-        ...(props.style || {})
-      }}
+      style={style}
       {...props}
     >
       {children}
-    </Box>
+    </a>
   );
-}
+});
+
+Link.displayName = 'Link';