56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import cn from 'classnames'
|
|
|
|
export default function linkButtonFactory({ defaults, icons, styles }) {
|
|
const LinkButton: FunctionComponent<{
|
|
autoHeight?: boolean
|
|
className?: string
|
|
color?: string
|
|
design?: string
|
|
href?: string
|
|
fullWidth?: boolean
|
|
icon?: string
|
|
iconSize?: string
|
|
invert?: boolean
|
|
size?: string
|
|
tabIndex?: number
|
|
title?: string
|
|
}> = ({
|
|
autoHeight = defaults?.autoHeight,
|
|
children,
|
|
className,
|
|
color = defaults?.color,
|
|
design = defaults?.design,
|
|
href,
|
|
fullWidth = defaults?.fullWidth,
|
|
icon = defaults?.icon,
|
|
iconSize,
|
|
invert = defaults?.invert,
|
|
size = defaults?.size,
|
|
tabIndex,
|
|
title,
|
|
}) => (
|
|
<a
|
|
className={cn(
|
|
styles.base,
|
|
design && styles[design],
|
|
size && styles[size],
|
|
color && styles[color],
|
|
autoHeight && styles.autoHeight,
|
|
fullWidth && styles.fullWidth,
|
|
invert && styles.invert,
|
|
className,
|
|
)}
|
|
style={iconSize && { '--icon-size': iconSize }}
|
|
href={href}
|
|
tabIndex={tabIndex}
|
|
title={title}
|
|
>
|
|
{icon && <i className={styles.icon} style={{ maskImage: `url(${icons[icon] || icon})` }} />}
|
|
{children && <span>{children}</span>}
|
|
</a>
|
|
)
|
|
|
|
return LinkButton
|
|
}
|