63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { User } from 'common/user'
|
|
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'
|
|
import { ParsedUrlQuery } from 'querystring'
|
|
|
|
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
|
|
query: ParsedUrlQuery
|
|
}) {
|
|
const { user, query } = props
|
|
const [showBadgesModal, setShowBadgesModal] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const showBadgesModal = query['show'] == 'badges'
|
|
setShowBadgesModal(showBadgesModal)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
// 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>
|
|
)
|
|
}
|