website refactor

apps/website/ui/Link.tsx

@@ -1,19 +1,19 @@
 import React, { ReactNode } from 'react';
 import { Box, BoxProps } from './primitives/Box';
 
-interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'className' | 'onClick'> {
+export interface LinkProps extends Omit<BoxProps<'a'>, 'children' | 'onClick'> {
   href: string;
   children: ReactNode;
-  className?: string;
   variant?: 'primary' | 'secondary' | 'ghost';
   size?: 'xs' | 'sm' | 'md' | 'lg';
   target?: '_blank' | '_self' | '_parent' | '_top';
   rel?: string;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-  style?: React.CSSProperties;
   block?: boolean;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | string;
   truncate?: boolean;
+  hoverColor?: string;
+  transition?: boolean;
 }
 
 export function Link({ 
@@ -25,10 +25,11 @@ export function Link({
   target = '_self',
   rel = '',
   onClick,
-  style,
   block = false,
   weight,
   truncate,
+  hoverColor,
+  transition,
   ...props
 }: LinkProps) {
   const baseClasses = 'inline-flex items-center transition-colors';
@@ -46,7 +47,7 @@ export function Link({
     lg: 'text-lg'
   };
 
-  const weightClasses = {
+  const weightClasses: Record<string, string> = {
     light: 'font-light',
     normal: 'font-normal',
     medium: 'font-medium',
@@ -58,8 +59,10 @@ export function Link({
     block ? 'flex' : baseClasses,
     variantClasses[variant],
     sizeClasses[size],
-    weight ? weightClasses[weight] : '',
+    weight && weightClasses[weight] ? weightClasses[weight] : '',
     truncate ? 'truncate' : '',
+    hoverColor ? `hover:${hoverColor}` : '',
+    transition ? 'transition-all duration-150' : '',
     className
   ].filter(Boolean).join(' ');
   
@@ -71,7 +74,10 @@ export function Link({
       target={target}
       rel={rel}
       onClick={onClick}
-      style={style}
+      style={{
+        ...(weight && !weightClasses[weight] ? { fontWeight: weight } : {}),
+        ...(props.style || {})
+      }}
       {...props}
     >
       {children}