78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
"use client";
|
|
import {
|
|
Bug,
|
|
ShieldCheck,
|
|
Star,
|
|
Crown,
|
|
Heart,
|
|
Flame,
|
|
Gem,
|
|
Trophy,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
import { useI18n } from "./I18nProvider";
|
|
import { glowColor, type ProfileAppearance } from "@/shared/profile-appearance";
|
|
export const badgeIcons = {
|
|
star: Star,
|
|
crown: Crown,
|
|
heart: Heart,
|
|
flame: Flame,
|
|
gem: Gem,
|
|
trophy: Trophy,
|
|
sparkles: Sparkles,
|
|
};
|
|
export function Username({
|
|
name,
|
|
glow,
|
|
appearance = {},
|
|
}: {
|
|
name: string;
|
|
glow?: boolean;
|
|
appearance?: ProfileAppearance;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const color = glowColor(appearance.glow_color),
|
|
enabled = glow ?? appearance.name_glow;
|
|
const Icon =
|
|
badgeIcons[appearance.custom_prefix_icon as keyof typeof badgeIcons] ??
|
|
Star;
|
|
return (
|
|
<span className="username">
|
|
{appearance.role === "moderator" && (
|
|
<span
|
|
className="username-prefix username-moderator"
|
|
title={t("Moderator")}
|
|
>
|
|
<ShieldCheck size={13} aria-hidden="true" />
|
|
{t("Moderator")}
|
|
</span>
|
|
)}
|
|
{appearance.bug_finder && (
|
|
<span
|
|
className="username-prefix username-bug-finder"
|
|
title={t("Bug finder")}
|
|
>
|
|
<Bug size={13} aria-hidden="true" />
|
|
{t("Bug finder")}
|
|
</span>
|
|
)}
|
|
{appearance.custom_prefix && (
|
|
<span className="username-prefix username-custom-prefix">
|
|
<Icon size={13} aria-hidden="true" />
|
|
{appearance.custom_prefix}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={enabled ? "username-glow" : undefined}
|
|
style={
|
|
enabled
|
|
? { color, textShadow: `0 0 8px ${color}90, 0 0 18px ${color}60` }
|
|
: undefined
|
|
}
|
|
>
|
|
{name}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|