Files
gridpilot.gg/apps/website/ui/Link.tsx
2026-01-18 21:31:08 +01:00

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';