website refactor

apps/website/ui/Link.tsx

@@ -1,14 +1,19 @@
-import React, { ReactNode, AnchorHTMLAttributes } from 'react';
+import React, { ReactNode, AnchorHTMLAttributes, ElementType } from 'react';
+import { Box, BoxProps } from './Box';
 
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'className' | 'onClick'> {
   href: string;
   children: ReactNode;
   className?: string;
   variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   target?: '_blank' | '_self' | '_parent' | '_top';
   rel?: string;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   style?: React.CSSProperties;
+  block?: boolean;
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  truncate?: boolean;
 }
 
 export function Link({ 
@@ -16,10 +21,14 @@ export function Link({
   children, 
   className = '',
   variant = 'primary',
+  size = 'md',
   target = '_self',
   rel = '',
   onClick,
   style,
+  block = false,
+  weight,
+  truncate,
   ...props
 }: LinkProps) {
   const baseClasses = 'inline-flex items-center transition-colors';
@@ -29,24 +38,43 @@ export function Link({
     secondary: 'text-purple-300 hover:text-purple-400',
     ghost: 'text-gray-400 hover:text-gray-300'
   };
+
+  const sizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg'
+  };
+
+  const weightClasses = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold'
+  };
   
   const classes = [
-    baseClasses,
+    block ? 'flex' : baseClasses,
     variantClasses[variant],
+    sizeClasses[size],
+    weight ? weightClasses[weight] : '',
+    truncate ? 'truncate' : '',
     className
   ].filter(Boolean).join(' ');
   
   return (
-    <a 
+    <Box 
+      as="a"
       href={href} 
       className={classes}
       target={target}
       rel={rel}
-      onClick={onClick}
+      onClick={onClick as any}
       style={style}
       {...props}
     >
       {children}
-    </a>
+    </Box>
   );
 }