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 ( +
+ {username} +
+ ) +} 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 = ( - - ) - - if (noLink) return image - - return ( - - {image} - - ) -} - -export function AvatarPlaceholder() { - return
-} +import { Avatar } from './avatar' function FeedComment(props: { activityItem: any @@ -86,7 +57,7 @@ function FeedComment(props: { return ( <> - +

@@ -301,7 +272,7 @@ function FeedQuestion(props: { contract: Contract }) { return ( <> {contract.creatorAvatarUrl ? ( - @@ -355,7 +326,7 @@ function FeedDescription(props: { contract: Contract }) { return ( <> {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()} >

- {user?.avatarUrl ? ( - - ) : ( - - )} +
{/* TODO: Show focus, for accessibility */}