53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React, { ReactNode, AnchorHTMLAttributes } from 'react';
|
|
|
|
interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
href: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
variant?: 'primary' | 'secondary' | 'ghost';
|
|
target?: '_blank' | '_self' | '_parent' | '_top';
|
|
rel?: string;
|
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function Link({
|
|
href,
|
|
children,
|
|
className = '',
|
|
variant = 'primary',
|
|
target = '_self',
|
|
rel = '',
|
|
onClick,
|
|
style,
|
|
...props
|
|
}: LinkProps) {
|
|
const baseClasses = 'inline-flex items-center transition-colors';
|
|
|
|
const variantClasses = {
|
|
primary: 'text-primary-blue hover:text-primary-blue/80',
|
|
secondary: 'text-purple-300 hover:text-purple-400',
|
|
ghost: 'text-gray-400 hover:text-gray-300'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<a
|
|
href={href}
|
|
className={classes}
|
|
target={target}
|
|
rel={rel}
|
|
onClick={onClick}
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|