website refactor

apps/website/ui/Link.tsx

@@ -10,6 +10,20 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   block?: boolean;
   hoverColor?: string;
   transition?: boolean;
+  pb?: number;
+  truncate?: boolean;
+  hoverTextColor?: string;
+  display?: string;
+  alignItems?: string;
+  gap?: number;
+  rounded?: string;
+  bg?: string;
+  px?: number;
+  py?: number;
+  border?: boolean;
+  borderColor?: string;
+  shadow?: string;
+  hoverBorderColor?: string;
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ 
@@ -22,6 +36,20 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
   block = false,
   hoverColor,
   transition = true,
+  pb,
+  truncate,
+  hoverTextColor,
+  display,
+  alignItems,
+  gap,
+  rounded,
+  bg,
+  px,
+  py,
+  border,
+  borderColor,
+  shadow,
+  hoverBorderColor,
   ...props
 }, ref) => {
   const variantClasses = {
@@ -43,12 +71,24 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
     block ? 'block' : 'inline',
     variantClasses[variant],
     underlineClasses[underline],
+    truncate ? 'truncate' : '',
   ].join(' ');
 
   const style: React.CSSProperties = {
     ...(size ? { fontSize: size } : {}),
     ...(weight ? { fontWeight: weight } : {}),
     ...(letterSpacing ? { letterSpacing } : {}),
+    ...(pb ? { paddingBottom: `${pb * 0.25}rem` } : {}),
+    ...(display ? { display } : {}),
+    ...(alignItems ? { alignItems } : {}),
+    ...(gap ? { gap: `${gap * 0.25}rem` } : {}),
+    ...(rounded ? { borderRadius: rounded === 'full' ? '9999px' : `var(--ui-radius-${rounded})` } : {}),
+    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
+    ...(py ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
+    ...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
+    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
+    ...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
   };
 
   return (