Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 4x 4x 4x 4x 4x 4x 4x 4x | import { PropsWithChildren } from 'react'
import Link, { LinkProps } from 'next/link'
export type LinkButtonSize = 'xs' | 'sm' | 'md' | 'lg'
export type LinkButtonStyle = 'default' | 'primary'
export interface LinkButtonProps extends LinkProps, PropsWithChildren {
external?: boolean
fullWidth?: boolean
id?: string
lang?: string
size?: LinkButtonSize
style?: LinkButtonStyle
}
const sizes = {
xs: 'px-1.5 py-px rounded-sm text-sm',
sm: 'px-2.5 py-1.5 rounded-sm text-sm',
md: 'px-3.5 py-2.5 rounded text-base',
lg: 'px-4 py-2.5 rounded-md text-lg',
}
const styles = {
default: `bg-gray-normal border-b-gray-500 border-gray-dark border-r-gray-500 text-blue-light focus:bg-gray-dark focus:text-blue-light hover:bg-gray-dark hover:border-l-gray-deep hover:border-t-grasy-deep hover:text-blue-light visited:text-blue-light`,
primary: `bg-blue-dark border-blue-dark text-basic-white active:bg-blue-active focus:bg-blue-normal focus:text-basic-white hover:bg-blue-normal hover:text-basic-white visited:text-basic-white`,
}
const LinkButton = ({
children,
external,
fullWidth,
href,
id,
locale,
lang,
size,
style,
}: LinkButtonProps) => {
const baseClasses =
'align-middle border font-display inline-flex items-center justify-center no-underline shadow-sm text-center focus:ring-2 focus:ring-black focus:ring-offset-2'
const fullWidthClasses = fullWidth ? 'w-full' : undefined
const sizeClasses = sizes[size ?? 'md']
const styleClasses = styles[style ?? 'default']
return (
<Link
href={href}
target={external ? '_blank' : undefined}
rel={external ? 'noopener noreferrer' : undefined}
id={id}
lang={lang}
locale={locale}
className={`${baseClasses} ${fullWidthClasses} ${sizeClasses} ${styleClasses}`}
>
{children}
</Link>
)
}
export default LinkButton
|