81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
|
|
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?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
style?: React.CSSProperties;
|
|
block?: boolean;
|
|
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
truncate?: boolean;
|
|
}
|
|
|
|
export function Link({
|
|
href,
|
|
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';
|
|
|
|
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'
|
|
};
|
|
|
|
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 = [
|
|
block ? 'flex' : baseClasses,
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
weight ? weightClasses[weight] : '',
|
|
truncate ? 'truncate' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box
|
|
as="a"
|
|
href={href}
|
|
className={classes}
|
|
target={target}
|
|
rel={rel}
|
|
onClick={onClick}
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|