55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Avatar, AvatarFallback } from '@kit/ui/avatar';
|
|
import { cn } from '@kit/ui/utils';
|
|
|
|
interface MemberAvatarProps {
|
|
firstName: string;
|
|
lastName: string;
|
|
size?: 'default' | 'sm' | 'lg';
|
|
className?: string;
|
|
}
|
|
|
|
function getInitials(firstName: string, lastName: string): string {
|
|
const f = firstName.trim().charAt(0).toUpperCase();
|
|
const l = lastName.trim().charAt(0).toUpperCase();
|
|
return `${f}${l}`;
|
|
}
|
|
|
|
function getColorClass(firstName: string, lastName: string): string {
|
|
const name = `${firstName}${lastName}`;
|
|
let hash = 0;
|
|
for (let i = 0; i < name.length; i++) {
|
|
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
const colors = [
|
|
'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
|
|
'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
|
|
'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
|
|
'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
|
|
'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
|
|
'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
|
|
'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300',
|
|
'bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300',
|
|
];
|
|
return colors[Math.abs(hash) % colors.length]!;
|
|
}
|
|
|
|
export function MemberAvatar({
|
|
firstName,
|
|
lastName,
|
|
size = 'default',
|
|
className,
|
|
}: MemberAvatarProps) {
|
|
const initials = getInitials(firstName, lastName);
|
|
const colorClass = getColorClass(firstName, lastName);
|
|
|
|
return (
|
|
<Avatar size={size} className={cn('rounded-full', className)}>
|
|
<AvatarFallback className={cn('rounded-full font-medium', colorClass)}>
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|