From bdb2cfd71052eb1d6aa663a60e6ec5bd4c5b6424 Mon Sep 17 00:00:00 2001 From: mantikoros <sgrugett@gmail.com> Date: Thu, 27 Jan 2022 17:14:18 -0600 Subject: [PATCH] avatar component --- web/components/avatar.tsx | 34 ++++++++++++++++++++++++++ web/components/contract-feed.tsx | 41 +++++--------------------------- web/components/feed-create.tsx | 12 ++-------- 3 files changed, 42 insertions(+), 45 deletions(-) create mode 100644 web/components/avatar.tsx diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx new file mode 100644 index 00000000..0500fced --- /dev/null +++ b/web/components/avatar.tsx @@ -0,0 +1,34 @@ +import Router from 'next/router' +import clsx from 'clsx' + +export function Avatar(props: { + username?: string + avatarUrl?: string + noLink?: boolean +}) { + const { username, avatarUrl, noLink } = props + + const onClick = + noLink && username + ? undefined + : (e: any) => { + e.stopPropagation() + Router.push(`/${username}`) + } + return ( + <div className="rounded-full bg-gray-400 w-10 h-10"> + <img + className={clsx( + 'rounded-full bg-gray-400 flex items-center justify-center', + !noLink && 'cursor-pointer', + !avatarUrl && 'hidden' + )} + src={avatarUrl} + width={40} + height={40} + onClick={onClick} + alt={username} + /> + </div> + ) +} diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 2bc40ddb..fcb1386d 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -11,8 +11,9 @@ import { UsersIcon, XIcon, } from '@heroicons/react/solid' - import dayjs from 'dayjs' +import clsx from 'clsx' + import { OutcomeLabel } from './outcome-label' import { contractMetrics, @@ -40,38 +41,8 @@ import Textarea from 'react-expanding-textarea' import { outcome } from '../../common/contract' import { fromNow } from '../lib/util/time' import BetRow from './bet-row' -import clsx from 'clsx' import { parseTags } from '../../common/util/parse' - -export function AvatarWithIcon(props: { - username: string - avatarUrl: string - noLink?: boolean -}) { - const { username, avatarUrl, noLink } = props - - const image = ( - <img - className="rounded-full bg-gray-400 flex items-center justify-center" - src={avatarUrl} - width={40} - height={40} - alt="" - /> - ) - - if (noLink) return image - - return ( - <SiteLink className="relative" href={`/${username}`}> - {image} - </SiteLink> - ) -} - -export function AvatarPlaceholder() { - return <div className="rounded-full bg-gray-400 w-10 h-10" /> -} +import { Avatar } from './avatar' function FeedComment(props: { activityItem: any @@ -86,7 +57,7 @@ function FeedComment(props: { return ( <> - <AvatarWithIcon username={person.username} avatarUrl={person.avatarUrl} /> + <Avatar username={person.username} avatarUrl={person.avatarUrl} /> <div className="min-w-0 flex-1"> <div> <p className="mt-0.5 text-sm text-gray-500"> @@ -301,7 +272,7 @@ function FeedQuestion(props: { contract: Contract }) { return ( <> {contract.creatorAvatarUrl ? ( - <AvatarWithIcon + <Avatar username={contract.creatorUsername} avatarUrl={contract.creatorAvatarUrl} /> @@ -355,7 +326,7 @@ function FeedDescription(props: { contract: Contract }) { return ( <> {contract.creatorAvatarUrl ? ( - <AvatarWithIcon + <Avatar username={contract.creatorUsername} avatarUrl={contract.creatorAvatarUrl} /> diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx index e2a2a427..aa920dd1 100644 --- a/web/components/feed-create.tsx +++ b/web/components/feed-create.tsx @@ -1,4 +1,4 @@ -import { AvatarPlaceholder, AvatarWithIcon } from './contract-feed' +import { Avatar } from './avatar' import Textarea from 'react-expanding-textarea' import { useRef, useState } from 'react' import { Spacer } from './layout/spacer' @@ -86,15 +86,7 @@ export default function FeedCreate(props: { onClick={() => inputRef.current?.focus()} > <div className="relative flex items-start space-x-3"> - {user?.avatarUrl ? ( - <AvatarWithIcon - username={user.username} - avatarUrl={user.avatarUrl} - noLink - /> - ) : ( - <AvatarPlaceholder /> - )} + <Avatar username={user?.username} avatarUrl={user?.avatarUrl} noLink /> <div className="min-w-0 flex-1"> {/* TODO: Show focus, for accessibility */}