Extract shared UserPage code

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

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

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 (
+    <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>
+  )
+}
+
+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>
+  )
+}

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() {

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 />