My personal website
renderg.host
1import { cn } from '@/lib/utils';
2import React from 'react';
3import { Link as RouterLink } from 'react-router-dom';
4import { linkBaseStyles, underlinePositionStyles, underlineStyles } from './Link.styles';
5import { LinkProps } from './Link.types';
6import { usePageTheme } from '@/components/Layout/Layout';
7
8export const Link: React.FC<LinkProps> = ({
9 to,
10 href,
11 children,
12 underline = 'always',
13 underlinePosition = 'center',
14 className,
15 ...props
16}) => {
17 // Convert `to` to `href` if `to` is provided
18 const linkHref = to || href;
19
20 // Get page theme from context
21 const pageTheme = usePageTheme();
22
23 const underlineClass = underlineStyles[underline];
24 const positionClass = underlinePositionStyles[underlinePosition];
25
26 // Theme-based link colors:
27 // Accent: white text (inherits from parent)
28 // Default: blue text in light mode, white in dark mode
29 const themeColorClass = pageTheme === 'accent'
30 ? 'text-bones-white'
31 : 'text-bones-blue dark:text-bones-white';
32
33 // Check if this is an internal link (starts with / and no protocol)
34 const isInternal = linkHref?.startsWith('/') && !linkHref.startsWith('//');
35
36 const linkClasses = cn(linkBaseStyles, underlineClass, positionClass, themeColorClass, className);
37
38 // Use React Router Link for internal navigation
39 if (isInternal && linkHref) {
40 return (
41 <RouterLink to={linkHref} className={linkClasses} {...props}>
42 {children}
43 </RouterLink>
44 );
45 }
46
47 // Use regular anchor for external links
48 return (
49 <a href={linkHref} className={linkClasses} {...props}>
50 {children}
51 </a>
52 );
53};