manifold/web/components/contract/tip-button.tsx

98 lines
2.6 KiB
TypeScript
Raw Permalink Normal View History

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
2022-10-11 18:30:24 +00:00
const tipDisplay = shortFormatNumber(Math.ceil(totalTipped / 10))
const [hover, setHover] = useState(false)
return (
<Tooltip
2022-10-11 18:30:24 +00:00
text={
disabled
? `Total tips ${formatMoney(totalTipped)}`
2022-10-11 18:30:24 +00:00
: `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(
2022-10-13 19:33:41 +00:00
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>
)
}