40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export interface AvatarProps {
|
||
|
|
src?: string | null;
|
||
|
|
name?: string | null;
|
||
|
|
size?: number;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initials(name?: string | null): string {
|
||
|
|
if (!name) return "?";
|
||
|
|
const parts = name.trim().split(/\s+/);
|
||
|
|
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
|
||
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Avatar({ src, name, size = 36, className }: AvatarProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
|
||
|
|
"bg-[var(--color-signal)]/20 text-[var(--color-signal)] font-semibold",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
style={{ width: size, height: size, fontSize: size * 0.38 }}
|
||
|
|
>
|
||
|
|
{src ? (
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt={name ?? ""}
|
||
|
|
className="size-full object-cover"
|
||
|
|
loading="lazy"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
initials(name)
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|