47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { cn, resolveUploadUrl } from '@/lib/utils';
|
||
|
||
interface AvatarProps {
|
||
src?: string | null;
|
||
name?: string | null;
|
||
size?: number;
|
||
className?: string;
|
||
}
|
||
|
||
/**
|
||
* 头像组件：有 src 显示图片（onError 兜底），否则显示首字符圆形。
|
||
*/
|
||
export function Avatar({ src, name, size = 32, className }: AvatarProps) {
|
||
const [imgError, setImgError] = useState(false);
|
||
const showImg = Boolean(src) && !imgError;
|
||
const initial = (name?.trim()?.charAt(0) ?? '?').toUpperCase();
|
||
const fontSize = Math.max(12, Math.round(size * 0.45));
|
||
|
||
if (showImg) {
|
||
return (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={resolveUploadUrl(src ?? '')}
|
||
alt={name ?? 'avatar'}
|
||
onError={() => setImgError(true)}
|
||
style={{ width: size, height: size }}
|
||
className={cn('rounded-full object-cover', className)}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{ width: size, height: size, fontSize }}
|
||
className={cn(
|
||
'flex shrink-0 items-center justify-center rounded-full bg-brand-600 font-medium text-white',
|
||
className,
|
||
)}
|
||
>
|
||
{initial}
|
||
</div>
|
||
);
|
||
}
|