| "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",
|
| };
|
|
|
|
|
| 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();
|
| };
|
|
|
|
|
| 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>
|
| );
|
| }
|
|
|
