manifold/web/components/avatar.tsx
Forrest Wolf 1e0845f4b9
Replace some uses of any with more specific types (#344)
* Add tsconfig.json for common

* Prefer `const` over `let` over `var`

* Kill dead code

* Fix some trivial Typescript issues

* Turn on Typescript linting in common except for no-explicit-any

* Correctly specify tsconfig dir name in functions eslintrc

* Give react children explicit types

* Add explicit types to removeUndefinedProps

* Create StripeSession type

* Give event in Dropdown an explicit type

* Revert "Give event in Dropdown an explicit type"

This reverts commit 80604310f2.

* Give bids in NewBidTable an explicit type

* Cast results of removeUndefinedProps when neccessary

* Fix type of JoinSpans

* Revert "Cast results of removeUndefinedProps when neccessary"

This reverts commit 5541617bc8.

* Revert "Add explicit types to removeUndefinedProps"

This reverts commit ccf8ffb0b5.

* Give React children types everywhere

* Give event a type

* Give event correct type

* Lint

* Standardize React import

Co-authored-by: Marshall Polaris <marshall@pol.rs>
2022-05-26 15:22:44 -07:00

48 lines
1.2 KiB
TypeScript

import Router from 'next/router'
import clsx from 'clsx'
import { MouseEvent } from 'react'
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: MouseEvent) => {
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"
/>
)
}