51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { avatarColor } from "~/lib/avatar-colors";
|
|
|
|
interface TeamOwnerBadgeProps {
|
|
teamName: string;
|
|
ownerName?: string;
|
|
align?: "left" | "right";
|
|
}
|
|
|
|
export function TeamOwnerBadge({
|
|
teamName,
|
|
ownerName,
|
|
align = "left",
|
|
}: TeamOwnerBadgeProps) {
|
|
const initials =
|
|
teamName
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((w) => w[0].toUpperCase())
|
|
.join("") || "?";
|
|
const color = avatarColor(teamName);
|
|
|
|
const avatar = (
|
|
<div
|
|
role="img"
|
|
aria-label={teamName}
|
|
className="h-6 w-6 flex shrink-0 items-center justify-center font-bold text-[10px]"
|
|
style={{ backgroundColor: "#000", color }}
|
|
>
|
|
{initials}
|
|
</div>
|
|
);
|
|
|
|
const text = (
|
|
<div className={`min-w-0 ${align === "right" ? "text-right" : ""}`}>
|
|
<p className="text-xs font-medium truncate">{teamName}</p>
|
|
{ownerName && (
|
|
<p className="text-xs text-muted-foreground truncate">{ownerName}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-2 ${align === "right" ? "flex-row-reverse" : ""}`}
|
|
>
|
|
{avatar}
|
|
{text}
|
|
</div>
|
|
);
|
|
}
|