Spaces:
Running
Running
File size: 1,473 Bytes
a62d4c5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import { ReactNode, useState } from 'react'
interface ButtonProps {
children: ReactNode
className?: string
icon?: ReactNode
primary?: boolean
style?: {
[key: string]: string
}
onClick?: () => void
onDown?: () => void
onUp?: () => void
onEnter?: () => void
onLeave?: () => void
}
export default function Button(props: ButtonProps) {
const {
children,
className,
icon,
primary,
style,
onClick,
onDown,
onUp,
onEnter,
onLeave,
} = props
const [active, setActive] = useState(false)
let background = ''
if (primary) {
background = 'bg-primary hover:bg-black hover:text-white'
}
if (active) {
background = 'bg-black text-white'
}
if (!primary && !active) {
background = 'hover:bg-primary'
}
return (
<div
role="button"
onKeyDown={() => {
onDown?.()
}}
onClick={onClick}
onPointerDown={() => {
setActive(true)
onDown?.()
}}
onPointerUp={() => {
setActive(false)
onUp?.()
}}
onPointerEnter={() => {
onEnter?.()
}}
onPointerLeave={() => {
onLeave?.()
}}
tabIndex={-1}
className={[
'inline-flex space-x-3 py-3 px-5 rounded-md cursor-pointer',
background,
className,
].join(' ')}
style={style}
>
{icon}
<span className="whitespace-nowrap select-none">{children}</span>
</div>
)
}
|