File size: 1,885 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | "use client";
import { cn } from "@/shared/utils/cn";
export default function Avatar({
src,
alt = "Avatar",
name,
size = "md",
className,
}) {
const sizes = {
xs: "size-6 text-xs",
sm: "size-8 text-sm",
md: "size-10 text-base",
lg: "size-12 text-lg",
xl: "size-16 text-xl",
};
// Get initials from name
const getInitials = (name) => {
if (!name) return "?";
const parts = name.split(" ");
if (parts.length >= 2) {
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
}
return name.substring(0, 2).toUpperCase();
};
// Generate color from name
const getColorFromName = (name) => {
if (!name) return "bg-primary";
const colors = [
"bg-red-500",
"bg-orange-500",
"bg-amber-500",
"bg-yellow-500",
"bg-lime-500",
"bg-green-500",
"bg-emerald-500",
"bg-teal-500",
"bg-cyan-500",
"bg-sky-500",
"bg-blue-500",
"bg-indigo-500",
"bg-violet-500",
"bg-purple-500",
"bg-fuchsia-500",
"bg-pink-500",
"bg-rose-500",
];
const index = name.charCodeAt(0) % colors.length;
return colors[index];
};
if (src) {
return (
<div
className={cn(
"rounded-full bg-cover bg-center bg-no-repeat",
"ring-2 ring-white dark:ring-surface-dark shadow-sm",
sizes[size],
className
)}
style={{ backgroundImage: `url(${src})` }}
role="img"
aria-label={alt}
/>
);
}
return (
<div
className={cn(
"rounded-full flex items-center justify-center font-semibold text-white",
"ring-2 ring-white dark:ring-surface-dark shadow-sm",
sizes[size],
getColorFromName(name),
className
)}
role="img"
aria-label={alt}
>
{getInitials(name)}
</div>
);
}
|