67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import React, { ReactNode, forwardRef, AnchorHTMLAttributes } from 'react';
|
|
|
|
export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
children: ReactNode;
|
|
variant?: 'primary' | 'secondary' | 'ghost' | 'inherit';
|
|
underline?: 'always' | 'hover' | 'none';
|
|
size?: string;
|
|
weight?: string;
|
|
letterSpacing?: string;
|
|
block?: boolean;
|
|
hoverColor?: string;
|
|
transition?: boolean;
|
|
}
|
|
|
|
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
|
|
children,
|
|
variant = 'primary',
|
|
underline = 'hover',
|
|
size,
|
|
weight,
|
|
letterSpacing,
|
|
block = false,
|
|
hoverColor,
|
|
transition = true,
|
|
...props
|
|
}, ref) => {
|
|
const variantClasses = {
|
|
primary: 'text-[var(--ui-color-intent-primary)] hover:opacity-80',
|
|
secondary: 'text-[var(--ui-color-text-med)] hover:text-[var(--ui-color-text-high)]',
|
|
ghost: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]',
|
|
inherit: 'text-inherit',
|
|
};
|
|
|
|
const underlineClasses = {
|
|
always: 'underline',
|
|
hover: 'hover:underline',
|
|
none: 'no-underline',
|
|
};
|
|
|
|
const classes = [
|
|
transition ? 'transition-all duration-150 ease-in-out' : '',
|
|
'cursor-pointer',
|
|
block ? 'block' : 'inline',
|
|
variantClasses[variant],
|
|
underlineClasses[underline],
|
|
].join(' ');
|
|
|
|
const style: React.CSSProperties = {
|
|
...(size ? { fontSize: size } : {}),
|
|
...(weight ? { fontWeight: weight } : {}),
|
|
...(letterSpacing ? { letterSpacing } : {}),
|
|
};
|
|
|
|
return (
|
|
<a
|
|
ref={ref}
|
|
className={classes}
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
});
|
|
|
|
Link.displayName = 'Link';
|