35 lines
812 B
TypeScript
35 lines
812 B
TypeScript
|
import { JSX } from 'preact/jsx-runtime'
|
||
|
|
import { Icons } from './icons.tsx'
|
||
|
|
|
||
|
|
interface IconLinkProps {
|
||
|
|
active?: boolean
|
||
|
|
text?: string
|
||
|
|
icon?: keyof (typeof Icons)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function IconLink(
|
||
|
|
{ icon, children, active, ...props }:
|
||
|
|
& IconLinkProps
|
||
|
|
& JSX.HTMLAttributes<HTMLAnchorElement>,
|
||
|
|
) {
|
||
|
|
const Icon = typeof icon === 'string'
|
||
|
|
? Icons[icon as keyof typeof Icons]
|
||
|
|
: (() => <></>)
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
class={'p-2 sm:px-4 flex flex-col sm:flex-row flex-1 sm:flex-none bg-mantle justify-center items-center sm:justify-start text-center sm:text-left rounded hover:bg-crust transition-colors' +
|
||
|
|
(active ? ' text-primary' : '')}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{icon !== undefined
|
||
|
|
? (
|
||
|
|
<span class='sm:mr-2 block'>
|
||
|
|
<Icon />
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
: ''}
|
||
|
|
<div class=''>{children}</div>
|
||
|
|
</a>
|
||
|
|
)
|
||
|
|
}
|