46 lines
990 B
TypeScript
46 lines
990 B
TypeScript
import { avatarColor } from "~/lib/avatar-colors";
|
|
|
|
interface TeamAvatarProps {
|
|
teamId: string;
|
|
teamName: string;
|
|
logoUrl?: string | null;
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "h-6 w-6 text-[10px]",
|
|
md: "h-9 w-9 text-sm",
|
|
lg: "h-12 w-12 text-base",
|
|
};
|
|
|
|
export function TeamAvatar({ teamId, teamName, logoUrl, size = "md" }: TeamAvatarProps) {
|
|
if (logoUrl) {
|
|
return (
|
|
<img
|
|
src={logoUrl}
|
|
alt={teamName}
|
|
className={`${sizeClasses[size]} object-cover shrink-0`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const color = avatarColor(teamId);
|
|
const initials =
|
|
teamName
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((w) => w[0].toUpperCase())
|
|
.join("") || "?";
|
|
|
|
return (
|
|
<div
|
|
role="img"
|
|
aria-label={teamName}
|
|
className={`${sizeClasses[size]} flex shrink-0 items-center justify-center font-bold`}
|
|
style={{ backgroundColor: "#000", color }}
|
|
>
|
|
{initials}
|
|
</div>
|
|
);
|
|
}
|