adefd3259c
* 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
47 lines
1.2 KiB
TypeScript
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"
|
|
/>
|
|
)
|
|
}
|