40 lines
970 B
TypeScript
40 lines
970 B
TypeScript
import { cloneElement, ReactNode, ReactElement, ElementType } from 'react'
|
|
import cx from 'classnames'
|
|
|
|
import styles from './BumpLink.module.scss'
|
|
|
|
type Props = {
|
|
children?: ReactNode
|
|
title: ReactElement<any> | string
|
|
href: string
|
|
as?: ElementType<{ className?: string; href: string }>
|
|
className?: string
|
|
}
|
|
export const BumpLink = ({ as, children, href, title, className }: Props) => {
|
|
const Component = as || 'a'
|
|
|
|
const symbol = <span className={styles.symbol}>→</span>
|
|
let extendedTitle: ReactNode
|
|
if (typeof title === 'string') {
|
|
extendedTitle = (
|
|
<span className="h4">
|
|
{title} {symbol}
|
|
</span>
|
|
)
|
|
} else {
|
|
extendedTitle = cloneElement(title, title.props, title.props.children, symbol)
|
|
}
|
|
|
|
return (
|
|
<Component
|
|
data-testid="bump-link"
|
|
className={cx(styles.container, 'no-underline d-block py-1', className)}
|
|
href={href}
|
|
>
|
|
{extendedTitle}
|
|
|
|
{children}
|
|
</Component>
|
|
)
|
|
}
|