diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index 86919548..cecb4bc5 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -11,7 +11,7 @@ import { Spacer } from './layout/spacer' import { Contract, path } from '../lib/firebase/contracts' import { Row } from './layout/row' import { calculateWinnings, currentValue } from '../lib/calculation/contract' -import { UserLink } from '../pages/account' +import { UserLink } from './user-page' export function BetsList(props: { user: User }) { const { user } = props diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx index f10ed9d4..5a0a041e 100644 --- a/web/components/contracts-list.tsx +++ b/web/components/contracts-list.tsx @@ -10,7 +10,7 @@ import { } from '../lib/firebase/contracts' import { formatMoney } from '../lib/util/format' import { User } from '../lib/firebase/users' -import { UserLink } from '../pages/account' +import { UserLink } from './user-page' export function ContractDetails(props: { contract: Contract }) { const { contract } = props diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx new file mode 100644 index 00000000..e4e1749a --- /dev/null +++ b/web/components/user-page.tsx @@ -0,0 +1,84 @@ +import { firebaseLogout, User } from '../lib/firebase/users' +import { Header } from './header' +import { ContractsList } from './contracts-list' +import { Title } from './title' +import { Row } from './layout/row' +import { formatMoney } from '../lib/util/format' +import { BetsList } from './bets-list' +import { Spacer } from './layout/spacer' +import Link from 'next/link' +import clsx from 'clsx' + +export function UserLink(props: { displayName: string; className?: string }) { + const { displayName, className } = props + const username = displayName.replace(/\s+/g, '') + + return ( + + + @{username} + + + ) +} + +function UserCard(props: { user: User }) { + const { user } = props + return ( + +
+ {user?.avatarUrl && ( + + )} +
+
+ +

{user?.email}

+

{formatMoney(user?.balance)}

+
+ +
+
+ + ) +} + +export function UserPage(props: { user: User }) { + const { user } = props + return ( +
+
+
+
+ + + + <ContractsList creator={user} /> + + <Spacer h={4} /> + + <Title className="px-2" text="Your bets" /> + <BetsList user={user} /> + </div> + </div> + </div> + ) +} diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx index 93f05109..e748a0ab 100644 --- a/web/pages/[username]/index.tsx +++ b/web/pages/[username]/index.tsx @@ -1,7 +1,7 @@ import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' import { getUserByUsername, User } from '../../lib/firebase/users' -import { UserPage } from '../account' +import { UserPage } from '../../components/user-page' import Error from 'next/error' export default function UserProfile() { diff --git a/web/pages/account.tsx b/web/pages/account.tsx index c85f48f8..e0d0d57b 100644 --- a/web/pages/account.tsx +++ b/web/pages/account.tsx @@ -1,66 +1,7 @@ -import { firebaseLogin, firebaseLogout, User } from '../lib/firebase/users' -import { Header } from '../components/header' +import React from 'react' +import { UserPage } from '../components/user-page' import { useUser } from '../hooks/use-user' -import { ContractsList } from '../components/contracts-list' -import { Title } from '../components/title' -import { Row } from '../components/layout/row' -import { formatMoney } from '../lib/util/format' -import { BetsList } from '../components/bets-list' -import { Spacer } from '../components/layout/spacer' -import Link from 'next/link' -import clsx from 'clsx' - -export function UserLink(props: { displayName: string; className?: string }) { - const { displayName, className } = props - const username = displayName.replace(/\s+/g, '') - - return ( - <Link href={`/${username}`}> - <a - className={clsx( - 'hover:underline hover:decoration-indigo-400 hover:decoration-2', - className - )} - > - @{username} - </a> - </Link> - ) -} - -function UserCard(props: { user: User }) { - const { user } = props - return ( - <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 mx-auto my-12"> - <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"> - <UserLink - displayName={user?.name} - className="card-title font-major-mono" - /> - <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> - </div> - </Row> - ) -} +import { firebaseLogin } from '../lib/firebase/users' function SignInCard() { return ( @@ -87,28 +28,6 @@ function SignInCard() { ) } -export function UserPage(props: { user: User }) { - const { user } = props - return ( - <div> - <Header /> - <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto"> - <div> - <UserCard user={user} /> - - <Title className="px-2" text="Your markets" /> - <ContractsList creator={user} /> - - <Spacer h={4} /> - - <Title className="px-2" text="Your bets" /> - <BetsList user={user} /> - </div> - </div> - </div> - ) -} - export default function Account() { const user = useUser() return user ? <UserPage user={user} /> : <SignInCard />