45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface AvatarProps {
|
|
name: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const COLORS = [
|
|
'bg-orange-500',
|
|
'bg-blue-500',
|
|
'bg-emerald-500',
|
|
'bg-purple-500',
|
|
'bg-pink-500',
|
|
];
|
|
|
|
const SIZE_MAP = {
|
|
sm: 'w-8 h-8 text-xs',
|
|
md: 'w-10 h-10 text-sm',
|
|
lg: 'w-12 h-12 text-base',
|
|
};
|
|
|
|
export const Avatar: React.FC<AvatarProps> = ({ name, size = 'md' }) => {
|
|
const getInitials = (name: string) => {
|
|
const parts = name.trim().split(/\s+/);
|
|
if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
};
|
|
|
|
const getColor = (name: string) => {
|
|
let hash = 0;
|
|
for (let i = 0; i < name.length; i++) {
|
|
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
const index = Math.abs(hash) % COLORS.length;
|
|
return COLORS[index];
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center justify-center rounded-full text-white font-medium ${SIZE_MAP[size]} ${getColor(name)}`}
|
|
>
|
|
{getInitials(name)}
|
|
</div>
|
|
);
|
|
}; |