Basic ability to sign in and view profile

web/components/header.tsx

@@ -1,5 +1,7 @@
 import { Popover } from '@headlessui/react'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { firebaseLogin, listenForLogin, User } from '../lib/firebase/users'
 
 const navigation = [
   {
@@ -9,6 +11,30 @@ const navigation = [
   { name: 'Simulator', href: '/simulator' },
 ]
 
+function SignInLink() {
+  const [user, setUser] = useState<User | null>(null)
+  useEffect(() => listenForLogin(setUser), [])
+
+  return (
+    <>
+      {user && user.id ? (
+        <Link href="/account">
+          <a className="text-base font-medium text-green-400 hover:text-gray-300">
+            {user.name}
+          </a>
+        </Link>
+      ) : (
+        <button
+          className="text-base font-medium text-green-400  hover:text-gray-300"
+          onClick={() => firebaseLogin()}
+        >
+          Sign In
+        </button>
+      )}
+    </>
+  )
+}
+
 export function Header() {
   return (
     <Popover as="header" className="relative">
@@ -40,6 +66,7 @@ export function Header() {
                   </a>
                 </Link>
               ))}
+              <SignInLink />
             </div>
           </div>
         </nav>

web/pages/account.tsx

@@ -0,0 +1,115 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { firebaseLogout, listenForLogin, User } from '../lib/firebase/users'
+import { Header } from '../components/header'
+
+export default function Account() {
+  const [user, setUser] = useState<User | null>(null)
+  useEffect(() => listenForLogin(setUser), [])
+  const router = useRouter()
+
+  return (
+    <div className="relative overflow-hidden h-screen bg-cover bg-gray-900">
+      <Header />
+      <div className="flex items-center w-full h-max px-4 py-10 bg-cover card">
+        <div className="card glass lg:card-side text-neutral-content bg-gray-800 m-10 transition-all">
+          <figure className="p-6">
+            <img src={user?.avatarUrl} className="rounded-lg shadow-lg" />
+          </figure>
+          <div className="max-w-md card-body">
+            <h2 className="card-title">{user?.name}</h2>
+            <p>{user?.email}</p>
+            <p>${user?.balanceUsd} USD</p>
+            <div className="card-actions">
+              <button
+                className="btn glass rounded-full"
+                onClick={() => {
+                  firebaseLogout()
+                  router.push('/')
+                }}
+              >
+                Sign Out
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Lorem ipsum table. TODO: fill in user's bets and markets */}
+        <h1 className="text-4xl text-neutral-content m-4">
+          {user?.username}'s Bets
+        </h1>
+        <div className="overflow-x-auto">
+          <table className="table table-compact">
+            <thead>
+              <tr>
+                <th></th>
+                <th>Name</th>
+                <th>Job</th>
+                <th>company</th>
+                <th>location</th>
+                <th>Last Login</th>
+                <th>Favorite Color</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th>1</th>
+                <td>Cy Ganderton</td>
+                <td>Quality Control Specialist</td>
+                <td>Littel, Schaden and Vandervort</td>
+                <td>Canada</td>
+                <td>12/16/2020</td>
+                <td>Blue</td>
+              </tr>
+              <tr>
+                <th>2</th>
+                <td>Hart Hagerty</td>
+                <td>Desktop Support Technician</td>
+                <td>Zemlak, Daniel and Leannon</td>
+                <td>United States</td>
+                <td>12/5/2020</td>
+                <td>Purple</td>
+              </tr>
+              <tr>
+                <th>3</th>
+                <td>Brice Swyre</td>
+                <td>Tax Accountant</td>
+                <td>Carroll Group</td>
+                <td>China</td>
+                <td>8/15/2020</td>
+                <td>Red</td>
+              </tr>
+              <tr>
+                <th>4</th>
+                <td>Marjy Ferencz</td>
+                <td>Office Assistant I</td>
+                <td>Rowe-Schoen</td>
+                <td>Russia</td>
+                <td>3/25/2021</td>
+                <td>Crimson</td>
+              </tr>
+              <tr>
+                <th>5</th>
+                <td>Yancy Tear</td>
+                <td>Community Outreach Specialist</td>
+                <td>Wyman-Ledner</td>
+                <td>Brazil</td>
+                <td>5/22/2020</td>
+                <td>Indigo</td>
+              </tr>
+              <tr>
+                <th>6</th>
+                <td>Irma Vasilik</td>
+                <td>Editor</td>
+                <td>Wiza, Bins and Emard</td>
+                <td>Venezuela</td>
+                <td>12/8/2020</td>
+                <td>Purple</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}