98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import clsx from 'clsx'
|
|
import { formatMoney, shortFormatNumber } from 'common/util/format'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Tooltip } from '../tooltip'
|
|
import TipJar from 'web/public/custom-components/tipJar'
|
|
import { useState } from 'react'
|
|
import Coin from 'web/public/custom-components/coin'
|
|
|
|
export function TipButton(props: {
|
|
tipAmount: number
|
|
totalTipped: number
|
|
onClick: () => void
|
|
userTipped: boolean
|
|
isCompact?: boolean
|
|
disabled?: boolean
|
|
}) {
|
|
const { tipAmount, totalTipped, userTipped, onClick, disabled } = props
|
|
|
|
const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
|
|
|
|
const [hover, setHover] = useState(false)
|
|
|
|
return (
|
|
<Tooltip
|
|
text={
|
|
disabled
|
|
? `Total tips ${formatMoney(totalTipped)}`
|
|
: `Tip ${formatMoney(tipAmount)}`
|
|
}
|
|
placement="bottom"
|
|
noTap
|
|
noFade
|
|
>
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
'px-2 py-1 text-xs', //2xs button
|
|
'text-greyscale-5 transition-transform disabled:cursor-not-allowed',
|
|
!disabled ? 'hover:text-greyscale-6' : ''
|
|
)}
|
|
onMouseOver={() => {
|
|
if (!disabled) {
|
|
setHover(true)
|
|
}
|
|
}}
|
|
onMouseLeave={() => setHover(false)}
|
|
>
|
|
<Col className={clsx('relative')}>
|
|
<div
|
|
className={clsx(
|
|
'absolute transition-all',
|
|
hover ? 'left-[6px] -top-[9px]' : 'left-[8px] -top-[10px]'
|
|
)}
|
|
>
|
|
<Coin
|
|
size={10}
|
|
color={
|
|
hover && !userTipped
|
|
? '#66667C'
|
|
: userTipped
|
|
? '#4f46e5'
|
|
: '#9191a7'
|
|
}
|
|
strokeWidth={2}
|
|
/>
|
|
</div>
|
|
<TipJar
|
|
size={18}
|
|
color={
|
|
hover && !disabled && !userTipped
|
|
? '#66667C'
|
|
: userTipped
|
|
? '#4f46e5'
|
|
: '#9191a7'
|
|
}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
userTipped && 'text-indigo-600',
|
|
' absolute top-[2px] text-[0.5rem]',
|
|
tipDisplay.length === 1
|
|
? 'left-[7px]'
|
|
: tipDisplay.length === 2
|
|
? 'left-[4.5px]'
|
|
: tipDisplay.length > 2
|
|
? 'left-[4px] top-[2.5px] text-[0.35rem]'
|
|
: ''
|
|
)}
|
|
>
|
|
{totalTipped > 0 ? tipDisplay : ''}
|
|
</div>
|
|
</Col>
|
|
</button>
|
|
</Tooltip>
|
|
)
|
|
}
|