60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
import Badge from 'react-bootstrap/Badge'
|
|
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
|
|
import Tooltip from 'react-bootstrap/Tooltip'
|
|
import CowboyHatIcon from '@/svgs/cowboy.svg'
|
|
import AnonIcon from '@/svgs/spy-fill.svg'
|
|
import { numWithUnits } from '@/lib/format'
|
|
import { USER_ID } from '@/lib/constants'
|
|
|
|
export default function Hat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) {
|
|
if (!user || Number(user.id) === USER_ID.ad) return null
|
|
if (Number(user.id) === USER_ID.anon) {
|
|
return (
|
|
<HatTooltip overlayText='anonymous'>
|
|
{badge
|
|
? (
|
|
<Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
|
|
<AnonIcon className={`${className} align-middle`} height={height} width={width} />
|
|
</Badge>)
|
|
: <span><AnonIcon className={`${className} align-middle`} height={height} width={width} /></span>}
|
|
</HatTooltip>
|
|
)
|
|
}
|
|
|
|
const streak = user.optional.streak
|
|
if (streak === null) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<HatTooltip overlayText={streak
|
|
? `${numWithUnits(streak, { abbreviate: false, unitSingular: 'day', unitPlural: 'days' })}`
|
|
: 'new'}
|
|
>
|
|
{badge
|
|
? (
|
|
<Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
|
|
<CowboyHatIcon className={className} height={height} width={width} />
|
|
<span className='ms-1 text-dark'>{streak || 'new'}</span>
|
|
</Badge>)
|
|
: <span><CowboyHatIcon className={className} height={height} width={width} /></span>}
|
|
</HatTooltip>
|
|
)
|
|
}
|
|
|
|
export function HatTooltip ({ children, overlayText, placement }) {
|
|
return (
|
|
<OverlayTrigger
|
|
placement={placement || 'bottom'}
|
|
overlay={
|
|
<Tooltip>
|
|
{overlayText}
|
|
</Tooltip>
|
|
}
|
|
trigger={['hover', 'focus']}
|
|
>
|
|
{children}
|
|
</OverlayTrigger>
|
|
)
|
|
}
|