94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import clsx from 'clsx'
|
|
import { User } from '../lib/firebase/users'
|
|
import { CreatorContractsList } from './contracts-list'
|
|
import { SEO } from './SEO'
|
|
import { Page } from './page'
|
|
import { SiteLink } from './site-link'
|
|
import { Avatar } from './avatar'
|
|
import { Col } from './layout/col'
|
|
import { Linkify } from './linkify'
|
|
import { Spacer } from './layout/spacer'
|
|
import { Row } from './layout/row'
|
|
|
|
export function UserLink(props: {
|
|
name: string
|
|
username: string
|
|
showUsername?: boolean
|
|
className?: string
|
|
}) {
|
|
const { name, username, showUsername, className } = props
|
|
|
|
return (
|
|
<SiteLink href={`/${username}`} className={clsx('z-10', className)}>
|
|
{name}
|
|
{showUsername && ` (@${username})`}
|
|
</SiteLink>
|
|
)
|
|
}
|
|
|
|
export function UserPage(props: { user: User; currentUser?: User }) {
|
|
const { user, currentUser } = props
|
|
|
|
const isCurrentUser = user.id === currentUser?.id
|
|
|
|
const possesive = isCurrentUser ? 'Your ' : `${user.name}'s `
|
|
|
|
const bannerImageUrl =
|
|
'https://images.unsplash.com/photo-1548197253-652ffe79752c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1975&q=80'
|
|
|
|
const placeholderBio = `Hi! Always happy to chat; reach out at akrolsmir@gmail.com, or find a time on https://calendly.com/austinchen/manifold !`
|
|
|
|
return (
|
|
<Page>
|
|
<SEO
|
|
title={possesive + 'markets'}
|
|
description={possesive + 'markets'}
|
|
url={`/@${user.username}`}
|
|
/>
|
|
|
|
<div
|
|
className="h-32 w-full bg-cover bg-center sm:h-40"
|
|
style={{
|
|
backgroundImage: `url(${bannerImageUrl})`,
|
|
}}
|
|
/>
|
|
|
|
<div className="relative -top-10 left-4">
|
|
<Avatar username={user.username} avatarUrl={user.avatarUrl} size={20} />
|
|
</div>
|
|
|
|
{/* Then the user's name, username, brief bio, and link to their twitter */}
|
|
<Col className="mx-4 -mt-6">
|
|
<span className="text-2xl font-bold">{user.name}</span>
|
|
<span className="text-gray-500">@{user.username}</span>
|
|
<Spacer h={4} />
|
|
|
|
<div>
|
|
<Linkify text={placeholderBio}></Linkify>
|
|
</div>
|
|
<Spacer h={4} />
|
|
|
|
<Row className="gap-4">
|
|
<a href={`https://twitter.com/akrolsmir`}>
|
|
<Row className="items-center gap-1">
|
|
<img src="/twitter-logo.svg" className="h-4 w-4" alt="Twitter" />
|
|
<span className="text-sm text-gray-500">akrolsmir</span>
|
|
</Row>
|
|
</a>
|
|
|
|
<a href="https://discord.com/invite/eHQBNBqXuh">
|
|
<Row className="items-center gap-1">
|
|
<img src="/discord-logo.svg" className="h-4 w-4" alt="Discord" />
|
|
<span className="text-sm text-gray-500">akrolsmir#4125</span>
|
|
</Row>
|
|
</a>
|
|
</Row>
|
|
|
|
<Spacer h={10} />
|
|
|
|
<CreatorContractsList creator={user} />
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|