ajamesphillips.com
forked from
leaflet.pub/leaflet
a tool for shared writing and social publishing
1import { AccountTiny } from "./Icons/AccountTiny";
2
3export const Avatar = (props: {
4 src: string | undefined;
5 displayName: string | undefined;
6 tiny?: boolean;
7}) => {
8 if (props.src)
9 return (
10 <img
11 className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
12 src={props.src}
13 alt={
14 props.displayName
15 ? `${props.displayName}'s avatar`
16 : "someone's avatar"
17 }
18 />
19 );
20 else
21 return (
22 <div
23 className={`bg-[var(--accent-light)] flex rounded-full shrink-0 border border-border-light place-items-center justify-center text-accent-1 ${props.tiny ? "w-4 h-4" : "w-5 h-5"}`}
24 >
25 <AccountTiny className={props.tiny ? "scale-80" : "scale-90"} />
26 </div>
27 );
28};