45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
|
|
const FALLBACK_AVATAR = 'https://files.skinbase.org/default/avatar_default.webp'
|
|
|
|
const BADGE_TONES = {
|
|
rose: 'border-rose-400/25 bg-rose-500/10 text-rose-200',
|
|
amber: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
|
|
sky: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
|
|
}
|
|
|
|
export default function ActivityAvatar({ user }) {
|
|
if (!user) return null
|
|
|
|
const badgeClassName = BADGE_TONES[user.badge?.tone] || BADGE_TONES.sky
|
|
|
|
return (
|
|
<div className="flex items-start gap-3">
|
|
<a href={user.profile_url || '#'} className="shrink-0">
|
|
<img
|
|
src={user.avatar_url || FALLBACK_AVATAR}
|
|
alt={user.name || user.username || 'User'}
|
|
className="h-11 w-11 rounded-2xl object-cover ring-1 ring-white/10"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(event) => {
|
|
event.currentTarget.src = FALLBACK_AVATAR
|
|
}}
|
|
/>
|
|
</a>
|
|
|
|
<div className="min-w-0">
|
|
<a href={user.profile_url || '#'} className="truncate text-sm font-semibold text-white hover:text-sky-200 transition-colors">
|
|
{user.name || user.username || 'User'}
|
|
</a>
|
|
{user.username && <p className="truncate text-xs text-white/35">@{user.username}</p>}
|
|
{user.badge && (
|
|
<span className={`mt-1 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${badgeClassName}`}>
|
|
{user.badge.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|