leaflet.pub
a tool for shared writing and social publishing
schlage.town
1import { AccountTiny } from "./Icons/AccountTiny";
2
3export const Avatar = (props: {
4 src: string | undefined;
5 displayName: string | undefined;
6 className?: string;
7 tiny?: boolean;
8 large?: boolean;
9 giant?: boolean;
10}) => {
11 if (props.src)
12 return (
13 <img
14 className={`${props.tiny ? "w-4 h-4" : props.large ? "h-8 w-8" : props.giant ? "h-16 w-16" : "w-5 h-5"} rounded-full shrink-0 border border-border-light ${props.className}`}
15 src={props.src}
16 alt={
17 props.displayName
18 ? `${props.displayName}'s avatar`
19 : "someone's avatar"
20 }
21 />
22 );
23 else
24 return (
25 <div
26 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"}`}
27 >
28 <AccountTiny className={props.tiny ? "scale-80" : "scale-90"} />
29 </div>
30 );
31};