41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
import { avatarColor, initials } from '../lib/format'
|
||
|
|
|
||
|
|
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
|
||
|
|
|
||
|
|
interface AvatarProps {
|
||
|
|
name: string
|
||
|
|
seed: number | string
|
||
|
|
size?: AvatarSize
|
||
|
|
online?: boolean
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const SIZE_CLASSES: Record<AvatarSize, string> = {
|
||
|
|
sm: 'h-8 w-8 text-[11px]',
|
||
|
|
md: 'h-10 w-10 text-xs',
|
||
|
|
lg: 'h-12 w-12 text-sm',
|
||
|
|
xl: 'h-16 w-16 text-lg',
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Avatar({ name, seed, size = 'md', online = false, className = '' }: AvatarProps) {
|
||
|
|
const background = avatarColor(seed)
|
||
|
|
return (
|
||
|
|
<span className={`relative inline-flex shrink-0 ${className}`}>
|
||
|
|
<span
|
||
|
|
className={`inline-flex items-center justify-center rounded-full font-semibold text-white/95 shadow-inner ring-1 ring-white/10 ${SIZE_CLASSES[size]}`}
|
||
|
|
style={{ backgroundImage: `linear-gradient(145deg, ${background}, color-mix(in srgb, ${background} 62%, #000))` }}
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
{initials({ display_name: name, username: name })}
|
||
|
|
</span>
|
||
|
|
{online && (
|
||
|
|
<span
|
||
|
|
className="absolute -right-0.5 -bottom-0.5 rounded-full border-2 border-panel bg-online"
|
||
|
|
style={{ width: '30%', height: '30%', minWidth: 9, minHeight: 9 }}
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|