manifold/web/components/user-page.tsx

85 lines
2.2 KiB
TypeScript
Raw Normal View History

2021-12-16 02:11:29 +00:00
import { firebaseLogout, User } from '../lib/firebase/users'
2021-12-30 20:03:32 +00:00
import { CreatorContractsList } from './contracts-list'
2021-12-16 02:11:29 +00:00
import { Title } from './title'
import { Row } from './layout/row'
import { formatMoney } from '../lib/util/format'
2021-12-16 21:17:32 +00:00
import { SEO } from './SEO'
import { Page } from './page'
import { SiteLink } from './site-link'
2021-12-16 02:11:29 +00:00
export function UserLink(props: {
name: string
username: string
showUsername?: boolean
className?: string
}) {
const { name, username, showUsername, className } = props
2021-12-16 02:11:29 +00:00
return (
2021-12-30 20:03:32 +00:00
<SiteLink href={`/${username}`} className={className}>
{name}
{showUsername && ` (@${username})`}
2021-12-30 20:03:32 +00:00
</SiteLink>
2021-12-16 02:11:29 +00:00
)
}
2021-12-16 21:17:32 +00:00
function UserCard(props: { user: User; showPrivateInfo?: boolean }) {
const { user, showPrivateInfo } = props
2021-12-16 02:11:29 +00:00
return (
2021-12-19 01:23:34 +00:00
<Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm my-12 mx-auto">
2021-12-16 02:11:29 +00:00
<div className="p-4">
{user?.avatarUrl && (
<img
src={user.avatarUrl}
className="rounded-lg shadow-lg"
width={96}
height={96}
/>
)}
</div>
<div className="max-w-md card-body">
2021-12-16 21:17:32 +00:00
<div className="card-title font-major-mono">{user.name}</div>
{showPrivateInfo && (
<>
<p>{user?.email}</p>
<p>{formatMoney(user?.balance)}</p>
<div className="card-actions">
<button
className="btn glass rounded-full hover:bg-green-500"
onClick={firebaseLogout}
>
Sign Out
</button>
</div>
</>
)}
2021-12-16 02:11:29 +00:00
</div>
</Row>
)
}
2021-12-16 21:17:32 +00:00
export function UserPage(props: { user: User; currentUser?: User }) {
const { user, currentUser } = props
const isCurrentUser = user.id === currentUser?.id
2021-12-31 20:25:01 +00:00
const possesive = isCurrentUser ? 'Your ' : `${user.name}'s `
2021-12-16 21:17:32 +00:00
2021-12-16 02:11:29 +00:00
return (
<Page>
2021-12-16 21:17:32 +00:00
<SEO
title={possesive + 'markets'}
description={possesive + 'markets'}
url={`/@${user.username}`}
/>
{/* <UserCard user={user} showPrivateInfo={isCurrentUser} /> */}
2021-12-16 21:17:32 +00:00
2021-12-18 23:40:39 +00:00
<Title text={possesive + 'markets'} />
2021-12-16 02:11:29 +00:00
2021-12-30 20:03:32 +00:00
<CreatorContractsList creator={user} />
</Page>
2021-12-16 02:11:29 +00:00
)
}