34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import type { LinkAccountIdentity } from "@/types/profile";
|
|
|
|
/**
|
|
* Photo-or-initial circle for another account (Linked Accounts, pending
|
|
* requests, blocked requests). Same look as the signed-in user's avatar in
|
|
* the side nav so the two read as the same kind of thing.
|
|
*/
|
|
export function AccountAvatar({
|
|
account,
|
|
sizeClass,
|
|
}: {
|
|
account: LinkAccountIdentity;
|
|
sizeClass: string;
|
|
}) {
|
|
if (account.avatar) {
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element -- data-URL avatars, no image-optimization pipeline in this self-hosted app
|
|
<img
|
|
src={account.avatar}
|
|
alt={account.name ?? account.email}
|
|
className={`${sizeClass} shrink-0 rounded-full object-cover`}
|
|
/>
|
|
);
|
|
}
|
|
const letter = (account.name?.trim()[0] ?? account.email[0] ?? "?").toUpperCase();
|
|
return (
|
|
<span
|
|
className={`${sizeClass} flex shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary uppercase`}
|
|
>
|
|
{letter}
|
|
</span>
|
|
);
|
|
}
|