2024-08-24 11:31:45 -05:00
|
|
|
import { JSX } from 'preact/jsx-runtime'
|
2024-08-25 11:21:06 -05:00
|
|
|
import { Icons } from './icons.tsx'
|
2024-08-24 11:31:45 -05:00
|
|
|
|
|
|
|
interface IconButtonProps {
|
|
|
|
active?: boolean
|
|
|
|
text?: string
|
2024-08-25 11:21:06 -05:00
|
|
|
icon?: keyof (typeof Icons)
|
2024-08-24 11:31:45 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export function IconButton(
|
|
|
|
{ icon, children, active, ...props }:
|
|
|
|
& IconButtonProps
|
|
|
|
& JSX.HTMLAttributes<HTMLButtonElement>,
|
|
|
|
) {
|
2024-08-25 11:21:06 -05:00
|
|
|
const Icon = typeof icon === 'string'
|
|
|
|
? Icons[icon as keyof typeof Icons]
|
|
|
|
: (() => <></>)
|
2024-08-24 11:31:45 -05:00
|
|
|
return (
|
|
|
|
<button
|
|
|
|
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' +
|
|
|
|
(active ? ' text-primary' : '')}
|
|
|
|
{...props}
|
|
|
|
>
|
2024-08-25 11:21:06 -05:00
|
|
|
{icon !== undefined
|
|
|
|
? (
|
|
|
|
<div class='sm:mr-2'>
|
|
|
|
<Icon />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
: ''}
|
2024-08-24 11:31:45 -05:00
|
|
|
<div class=''>{children}</div>
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|