manifold/web/components/avatar.tsx
Austin Chen a17342e55c
New, pretty user page (#48)
* Show bio, banner, and social links on user page

* Minor tweaks

* Allow edits to their user page

* Fix build; add a white ring around users

* From userpage, link to /profile (which is always editable now)

* Update userpage SEO

* Clean up Profile menu

* Fixes according to Stephen's code review
2022-02-17 17:16:58 -08:00

46 lines
1.1 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
className?: string
}) {
const { username, avatarUrl, noLink, size, className } = props
const s = 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>
)
}