Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 39x 39x 39x 39x 39x 39x 39x 39x 39x 39x 12x 12x 12x 12x 12x 12x 12x 12x 12x 27x 27x 27x 27x 27x 39x 39x 39x | /**
* A member's photo, or their initial in a circle when they have none. No
* hooks, so it renders in server components too.
*/
export default function Avatar({
name,
src,
size = 32,
className = '',
}: {
name: string
src: string | null | undefined
size?: number
className?: string
}) {
const style = {width: size, height: size}
if (src)
return (
// A 256px image already; next/image would only add a resize round trip
// eslint-disable-next-line @next/next/no-img-element
<img
src={src}
alt=""
width={size}
height={size}
loading="lazy"
style={style}
className={`shrink-0 rounded-full bg-line object-cover ${className}`}
/>
)
return (
<span
aria-hidden="true"
style={{...style, fontSize: Math.round(size * 0.42)}}
className={`inline-flex shrink-0 select-none items-center justify-center rounded-full bg-line-2 font-bold uppercase text-text ${className}`}
>
{name.trim().charAt(0) || '?'}
</span>
)
}
|