73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import classNames from 'classnames'
|
|
import React, { LegacyRef, ReactNode } from 'react'
|
|
|
|
interface Props extends React.HTMLProps<HTMLAnchorElement> {
|
|
children?: string | ReactNode
|
|
className?: string
|
|
color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary'
|
|
externalLink?: boolean
|
|
textSize?: 'extraSmall' | 'small' | 'medium' | 'large'
|
|
text?: string | ReactNode
|
|
uppercase?: boolean
|
|
onClick?: () => void
|
|
}
|
|
|
|
const colorClasses = {
|
|
primary:
|
|
'text-primary hover:text-secondary active:text-secondary/90 focus:text-text-secondary/90',
|
|
secondary: 'text-secondary hover:text-primary active:text-primary/90 focus:text-text-primary/90',
|
|
tertiary: 'text-white/80 hover:text-white active:text-white/90 focus:text-text-white/90',
|
|
quaternary: 'hover:text-white active:text-white',
|
|
}
|
|
const textSizeClasses = {
|
|
extraSmall: 'text-xs',
|
|
small: 'text-sm',
|
|
medium: 'text-base',
|
|
large: 'text-lg',
|
|
}
|
|
|
|
export const TextLink = React.forwardRef(function TextLink(
|
|
{
|
|
children,
|
|
className = '',
|
|
color = 'primary',
|
|
disabled,
|
|
externalLink,
|
|
href,
|
|
textSize = 'small',
|
|
text,
|
|
uppercase,
|
|
onClick,
|
|
...restProps
|
|
}: Props,
|
|
ref,
|
|
) {
|
|
return (
|
|
<a
|
|
className={classNames(
|
|
uppercase ? `${textSizeClasses[textSize]}-caps` : textSizeClasses[textSize],
|
|
colorClasses[color],
|
|
disabled && 'pointer-events-none opacity-50',
|
|
className,
|
|
)}
|
|
ref={ref as LegacyRef<HTMLAnchorElement>}
|
|
target={externalLink ? '_blank' : '_self'}
|
|
rel='noreferrer'
|
|
onClick={
|
|
onClick && !href
|
|
? (e) => {
|
|
e.preventDefault()
|
|
if (disabled) return
|
|
onClick()
|
|
}
|
|
: undefined
|
|
}
|
|
href={!href ? '#' : href}
|
|
{...restProps}
|
|
>
|
|
{text && !children && text}
|
|
{children && children}
|
|
</a>
|
|
)
|
|
})
|