Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.4 kB · 52 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253import { AccountTiny } from "./Icons/AccountTiny";
export const Avatar = (props: { src: string | null | undefined; displayName: string | null | undefined; className?: string; ariaHidden?: boolean; size?: "tiny" | "small" | "medium" | "large" | "giant";}) => { let sizeClassName = props.size === "tiny" ? "w-4 h-4" : props.size === "small" ? "w-5 h-5" : props.size === "medium" ? "h-6 w-6" : props.size === "large" ? "w-8 h-8" : props.size === "giant" ? "h-16 w-16" : "w-6 h-6";
if (props.src) return ( <img className={`${sizeClassName} relative rounded-full shrink-0 border border-border-light ${props.className}`} src={props.src} aria-hidden={props.ariaHidden} alt={ props.displayName ? `${props.displayName}'s avatar` : "someone's avatar" } /> ); else return ( <div className={` relative bg-[var(--accent-light)] flex rounded-full shrink-0 border border-border-light place-items-center justify-center text-accent-1 ${sizeClassName} ${props.className}`} > <AccountTiny className={ props.size === "tiny" ? "scale-80" : props.size === "small" ? "scale-90" : "" } /> </div> );};