stacker.news/components/cowboy-hat.js

40 lines
1.2 KiB
JavaScript
Raw Normal View History

2023-07-24 18:35:05 +00:00
import Badge from 'react-bootstrap/Badge'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Tooltip from 'react-bootstrap/Tooltip'
2023-02-01 14:44:35 +00:00
import CowboyHatIcon from '../svgs/cowboy.svg'
2023-07-24 18:35:05 +00:00
export default function CowboyHat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) {
2023-05-01 21:49:47 +00:00
if (user?.streak === null || user.hideCowboyHat) {
2023-02-01 14:44:35 +00:00
return null
}
2023-05-01 21:49:47 +00:00
const streak = user.streak
2023-02-01 14:44:35 +00:00
return (
2023-02-02 19:47:09 +00:00
<HatTooltip overlayText={streak ? `${streak} days` : 'new'}>
2023-02-01 14:44:35 +00:00
{badge
? (
2023-07-24 18:35:05 +00:00
<Badge bg='grey-medium' className='ms-2 d-inline-flex align-items-center'>
2023-02-01 14:44:35 +00:00
<CowboyHatIcon className={className} height={height} width={width} />
2023-07-24 18:35:05 +00:00
<span className='ms-1 text-dark'>{streak || 'new'}</span>
2023-02-01 14:44:35 +00:00
</Badge>)
2023-07-24 18:35:05 +00:00
: <span><CowboyHatIcon className={className} height={height} width={width} /></span>}
2023-02-01 14:44:35 +00:00
</HatTooltip>
)
}
function HatTooltip ({ children, overlayText, placement }) {
return (
<OverlayTrigger
placement={placement || 'bottom'}
overlay={
<Tooltip>
2023-02-02 19:47:09 +00:00
{overlayText}
2023-02-01 14:44:35 +00:00
</Tooltip>
}
trigger={['hover', 'focus']}
>
{children}
</OverlayTrigger>
)
}