Public Access
lobo
0154202ddc
Avatar borders frame the avatar on the dashboard, badges show next to the heading, banner frames wrap the hero image, and equipped accents set the color on both pages.
17 lines
644 B
React
17 lines
644 B
React
import {useTranslation} from 'react-i18next';
|
|
|
|
import {cn} from '@/lib/utils';
|
|
import {equippedBadge} from '../utils/rewards.js';
|
|
|
|
/** The badge worn from the points shop as a small pill; nothing when none is worn. */
|
|
export default function PointsBadge({equipped, className}) {
|
|
const {t} = useTranslation();
|
|
const badge = equippedBadge(equipped);
|
|
if (!badge) return null;
|
|
return (
|
|
<span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium', badge.className, className)}>
|
|
<badge.Icon className="size-3.5"/>{t(`POINTS.ITEMS.${badge.code}`)}
|
|
</span>
|
|
);
|
|
}
|