44 lines
976 B
TypeScript
44 lines
976 B
TypeScript
import { FunctionComponent, MouseEventHandler } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { IconType } from '@standardnotes/snjs'
|
|
|
|
type Props = {
|
|
onClick: () => void
|
|
className?: string
|
|
icon: IconType
|
|
iconClassName?: string
|
|
title: string
|
|
focusable: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
const IconButton: FunctionComponent<Props> = ({
|
|
onClick,
|
|
className = '',
|
|
icon,
|
|
title,
|
|
focusable,
|
|
iconClassName = '',
|
|
disabled = false,
|
|
}) => {
|
|
const click: MouseEventHandler = (e) => {
|
|
e.preventDefault()
|
|
onClick()
|
|
}
|
|
const focusableClass = focusable ? '' : 'focus:shadow-none'
|
|
return (
|
|
<button
|
|
type="button"
|
|
title={title}
|
|
className={`no-border cursor-pointer bg-transparent flex flex-row items-center ${focusableClass} ${className}`}
|
|
onClick={click}
|
|
disabled={disabled}
|
|
aria-label={title}
|
|
>
|
|
<Icon type={icon} className={iconClassName} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default IconButton
|