manifold/web/components/avatar.tsx
Marshall Polaris adefd3259c
Cleanup avatar component rendering (#130)
* Remove unnecessary classes on avatar img

I don't believe these have any visible effect.

* Don't apply Tailwind 'avatar' class in menu

We don't use this class elsewhere when displaying avatars (instead our
avatar has manual styles that do the stuff Tailwind is trying to do)
and it just assigns a weird size that we don't want.

If we want to use the Tailwind avatar styles we should refactor further.

* Remove unnecessary avatar wrapper div

* Remove old prop from avatar
2022-05-05 09:50:58 -07:00

47 lines
1.2 KiB
TypeScript

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}`)
}
// there can be no avatar URL or username in the feed, we show a "submit comment"
// item with a fake grey user circle guy even if you aren't signed in
return avatarUrl ? (
<img
className={clsx(
'flex-shrink-0 rounded-full rounded-full bg-white object-cover',
`w-${s} h-${s}`,
!noLink && 'cursor-pointer',
className
)}
src={avatarUrl}
onClick={onClick}
alt={username}
/>
) : (
<UserCircleIcon
className={clsx(
`flex-shrink-0 rounded-full bg-white w-${s} h-${s} text-gray-500`,
className
)}
aria-hidden="true"
/>
)
}