import Router from 'next/router' import clsx from 'clsx' import { UserCircleIcon } from '@heroicons/react/solid' export function Avatar(props: { username?: string avatarUrl?: string noLink?: boolean size?: number | 'xs' | 'sm' className?: string }) { const { username, avatarUrl, noLink, size, className } = props const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10 const onClick = noLink && username ? undefined : (e: any) => { e.stopPropagation() Router.push(`/${username}`) } return ( <div className={`flex-shrink-0 rounded-full bg-white w-${s} h-${s}`}> {avatarUrl ? ( <img className={clsx( 'flex items-center justify-center rounded-full object-cover', `w-${s} h-${s}`, !noLink && 'cursor-pointer', className )} src={avatarUrl} onClick={onClick} alt={username} /> ) : ( // TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl <UserCircleIcon className={`w-${s} h-${s} text-gray-500`} aria-hidden="true" /> )} </div> ) }