manifold/web/components/avatar.tsx
2022-01-27 17:14:45 -06:00

35 lines
759 B
TypeScript

import Router from 'next/router'
import clsx from 'clsx'
export function Avatar(props: {
username?: string
avatarUrl?: string
noLink?: boolean
}) {
const { username, avatarUrl, noLink } = props
const onClick =
noLink && username
? undefined
: (e: any) => {
e.stopPropagation()
Router.push(`/${username}`)
}
return (
<div className="rounded-full bg-gray-400 w-10 h-10">
<img
className={clsx(
'rounded-full bg-gray-400 flex items-center justify-center',
!noLink && 'cursor-pointer',
!avatarUrl && 'hidden'
)}
src={avatarUrl}
width={40}
height={40}
onClick={onClick}
alt={username}
/>
</div>
)
}