Show avatar on contract cards

This commit is contained in:
Austin Chen 2022-02-04 10:30:56 -08:00
parent a46c311a99
commit 0959ec7679
3 changed files with 58 additions and 55 deletions

View File

@ -1,12 +1,15 @@
import Router from 'next/router' import Router from 'next/router'
import clsx from 'clsx' import clsx from 'clsx'
import { UserCircleIcon } from '@heroicons/react/solid'
export function Avatar(props: { export function Avatar(props: {
username?: string username?: string
avatarUrl?: string avatarUrl?: string
noLink?: boolean noLink?: boolean
size?: number
}) { }) {
const { username, avatarUrl, noLink } = props const { username, avatarUrl, noLink, size } = props
const s = size || 10
const onClick = const onClick =
noLink && username noLink && username
@ -16,12 +19,12 @@ export function Avatar(props: {
Router.push(`/${username}`) Router.push(`/${username}`)
} }
return ( return (
<div className="rounded-full bg-gray-400 w-10 h-10"> <div className={`rounded-full bg-white w-${s} h-${s}`}>
{avatarUrl ? (
<img <img
className={clsx( className={clsx(
'rounded-full bg-gray-400 flex items-center justify-center', 'rounded-full bg-gray-400 flex items-center justify-center',
!noLink && 'cursor-pointer', !noLink && 'cursor-pointer'
!avatarUrl && 'hidden'
)} )}
src={avatarUrl} src={avatarUrl}
width={40} width={40}
@ -29,6 +32,13 @@ export function Avatar(props: {
onClick={onClick} onClick={onClick}
alt={username} 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> </div>
) )
} }

View File

@ -9,12 +9,13 @@ import {
contractPath, contractPath,
} from '../lib/firebase/contracts' } from '../lib/firebase/contracts'
import { Col } from './layout/col' import { Col } from './layout/col'
import { parseTags } from '../../common/util/parse'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { TrendingUpIcon } from '@heroicons/react/solid' import { TrendingUpIcon } from '@heroicons/react/solid'
import { DateTimeTooltip } from './datetime-tooltip' import { DateTimeTooltip } from './datetime-tooltip'
import { ClockIcon } from '@heroicons/react/outline' import { ClockIcon } from '@heroicons/react/outline'
import { fromNow } from '../lib/util/time' import { fromNow } from '../lib/util/time'
import { Avatar } from './avatar'
import { Spacer } from './layout/spacer'
export function ContractCard(props: { export function ContractCard(props: {
contract: Contract contract: Contract
@ -37,7 +38,15 @@ export function ContractCard(props: {
<Link href={contractPath(contract)}> <Link href={contractPath(contract)}>
<a className="absolute left-0 right-0 top-0 bottom-0" /> <a className="absolute left-0 right-0 top-0 bottom-0" />
</Link> </Link>
<Row className="justify-between gap-4 mb-2">
<AbbrContractDetails
contract={contract}
showHotVolume={showHotVolume}
showCloseTime={showCloseTime}
/>
<Spacer h={3} />
<Row className="justify-between gap-4">
<p className="font-medium text-indigo-700">{question}</p> <p className="font-medium text-indigo-700">{question}</p>
<ResolutionOrChance <ResolutionOrChance
className="items-center" className="items-center"
@ -45,11 +54,6 @@ export function ContractCard(props: {
probPercent={probPercent} probPercent={probPercent}
/> />
</Row> </Row>
<AbbrContractDetails
contract={contract}
showHotVolume={showHotVolume}
showCloseTime={showCloseTime}
/>
</div> </div>
</div> </div>
) )
@ -104,7 +108,7 @@ export function ResolutionOrChance(props: {
) )
} }
export function AbbrContractDetails(props: { function AbbrContractDetails(props: {
contract: Contract contract: Contract
showHotVolume?: boolean showHotVolume?: boolean
showCloseTime?: boolean showCloseTime?: boolean
@ -115,13 +119,20 @@ export function AbbrContractDetails(props: {
return ( return (
<Col className={clsx('text-sm text-gray-500 gap-2')}> <Col className={clsx('text-sm text-gray-500 gap-2')}>
<Row className="gap-2 flex-wrap"> <Row className="justify-between items-center">
<Row className="gap-2 items-center">
<Avatar
username={creatorUsername}
avatarUrl={contract.creatorAvatarUrl}
size={6}
/>
<UserLink <UserLink
className="whitespace-nowrap" className="whitespace-nowrap"
name={creatorName} name={creatorName}
username={creatorUsername} username={creatorUsername}
/> />
<div></div> </Row>
{showHotVolume ? ( {showHotVolume ? (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
<TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '} <TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}

View File

@ -283,19 +283,10 @@ function FeedQuestion(props: { contract: Contract }) {
return ( return (
<> <>
{contract.creatorAvatarUrl ? (
<Avatar <Avatar
username={contract.creatorUsername} username={contract.creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
/> />
) : (
// TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
<div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div>
</div>
)}
<div className="min-w-0 flex-1 py-1.5"> <div className="min-w-0 flex-1 py-1.5">
<div className="text-sm text-gray-500 mb-2"> <div className="text-sm text-gray-500 mb-2">
<UserLink <UserLink
@ -337,19 +328,10 @@ function FeedDescription(props: { contract: Contract }) {
return ( return (
<> <>
{contract.creatorAvatarUrl ? (
<Avatar <Avatar
username={contract.creatorUsername} username={contract.creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
/> />
) : (
// TODO: After 2022-03-01, can just assume that all contracts have an avatarUrl
<div className="relative px-1">
<div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
<StarIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
</div>
</div>
)}
<div className="min-w-0 flex-1 py-1.5"> <div className="min-w-0 flex-1 py-1.5">
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500">
<UserLink <UserLink