50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
|
|
const ROLE_STYLES = {
|
|
admin: 'bg-red-500/15 text-red-300',
|
|
moderator: 'bg-amber-500/15 text-amber-300',
|
|
member: 'bg-sky-500/15 text-sky-300',
|
|
}
|
|
|
|
const ROLE_LABELS = {
|
|
admin: 'Admin',
|
|
moderator: 'Moderator',
|
|
member: 'Member',
|
|
}
|
|
|
|
export default function AuthorBadge({ user, size = 'md' }) {
|
|
const name = user?.name ?? 'Anonymous'
|
|
const avatar = user?.avatar_url ?? '/default/avatar_default.webp'
|
|
const role = (user?.role ?? 'member').toLowerCase()
|
|
const cls = ROLE_STYLES[role] ?? ROLE_STYLES.member
|
|
const label = ROLE_LABELS[role] ?? 'Member'
|
|
const rank = user?.rank ?? null
|
|
|
|
const imgSize = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10'
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<img
|
|
src={avatar}
|
|
alt={`${name} avatar`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
className={`${imgSize} rounded-full border border-white/10 object-cover`}
|
|
/>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-zinc-100">{name}</div>
|
|
<div className="mt-1 flex flex-wrap gap-1.5">
|
|
<span className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${cls}`}>
|
|
{label}
|
|
</span>
|
|
{rank && (
|
|
<span className="inline-flex rounded-full bg-emerald-500/12 px-2 py-0.5 text-[11px] font-medium text-emerald-300">
|
|
{rank}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|