manifold/web/components/badge-display.tsx

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>
  )
}