37 lines
922 B
TypeScript
37 lines
922 B
TypeScript
import { avatarColor } from "~/lib/avatar-colors";
|
|
|
|
interface LeagueAvatarProps {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
/** Tailwind size classes, e.g. "h-10 w-10" (default) or "h-5 w-5" */
|
|
className?: string;
|
|
/** Font size class, e.g. "text-sm" (default) or "text-[10px]" */
|
|
textClassName?: string;
|
|
}
|
|
|
|
export function LeagueAvatar({
|
|
leagueId,
|
|
leagueName,
|
|
className = "h-10 w-10",
|
|
textClassName = "text-sm",
|
|
}: LeagueAvatarProps) {
|
|
const color = avatarColor(leagueId);
|
|
const initials =
|
|
leagueName
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((w) => w[0].toUpperCase())
|
|
.join("") || "?";
|
|
|
|
return (
|
|
<div
|
|
role="img"
|
|
aria-label={leagueName}
|
|
className={`flex shrink-0 items-center justify-center rounded-none font-bold ${className} ${textClassName}`}
|
|
style={{ backgroundColor: "#000", color }}
|
|
>
|
|
{initials}
|
|
</div>
|
|
);
|
|
}
|