63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
|
import { User } from 'common/user'
|
||
|
import { NextRouter } from 'next/router'
|
||
|
import { useEffect, useState } from 'react'
|
||
|
import { getBadgesByRarity } from 'common/badge'
|
||
|
import { Row } from 'web/components/layout/row'
|
||
|
import clsx from 'clsx'
|
||
|
import { BadgesModal } from 'web/components/profile/badges-modal'
|
||
|
|
||
|
export const goldClassName = 'text-amber-400'
|
||
|
export const silverClassName = 'text-gray-500'
|
||
|
export const bronzeClassName = 'text-amber-900'
|
||
|
|
||
|
export function BadgeDisplay(props: {
|
||
|
user: User | undefined | null
|
||
|
router?: NextRouter
|
||
|
}) {
|
||
|
const { user, router } = props
|
||
|
const [showBadgesModal, setShowBadgesModal] = useState(false)
|
||
|
|
||
|
useEffect(() => {
|
||
|
if (!router) return
|
||
|
const showBadgesModal = router.query['show'] === 'badges'
|
||
|
setShowBadgesModal(showBadgesModal)
|
||
|
}, [router])
|
||
|
// get number of badges of each rarity type
|
||
|
const badgesByRarity = getBadgesByRarity(user)
|
||
|
const badgesByRarityItems = Object.entries(badgesByRarity).map(
|
||
|
([rarity, numBadges]) => {
|
||
|
return (
|
||
|
<Row
|
||
|
key={rarity}
|
||
|
className={clsx(
|
||
|
'items-center gap-2',
|
||
|
rarity === 'bronze'
|
||
|
? bronzeClassName
|
||
|
: rarity === 'silver'
|
||
|
? silverClassName
|
||
|
: goldClassName
|
||
|
)}
|
||
|
>
|
||
|
<span className={clsx('-m-0.5 text-lg')}>•</span>
|
||
|
<span className="text-xs">{numBadges}</span>
|
||
|
</Row>
|
||
|
)
|
||
|
}
|
||
|
)
|
||
|
return (
|
||
|
<Row
|
||
|
className={'cursor-pointer gap-2'}
|
||
|
onClick={() => setShowBadgesModal(true)}
|
||
|
>
|
||
|
{badgesByRarityItems}
|
||
|
{user && (
|
||
|
<BadgesModal
|
||
|
isOpen={showBadgesModal}
|
||
|
setOpen={setShowBadgesModal}
|
||
|
user={user}
|
||
|
/>
|
||
|
)}
|
||
|
</Row>
|
||
|
)
|
||
|
}
|