Update headers

web/components/header.tsx

@@ -1,28 +1,19 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import Image from 'next/Image'
 
 import { useUser } from '../hooks/use-user'
-
-const navigation: any[] = [
-  // {
-  //   name: 'About',
-  //   href: 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2',
-  // },
-]
+import { formatMoney } from '../lib/util/format'
+import { Row } from './layout/row'
+import { User } from '../lib/firebase/users'
 
 const hoverClasses =
   'hover:underline hover:decoration-indigo-400 hover:decoration-2'
 
-function SignInLink(props: { darkBackground?: boolean }) {
-  const { darkBackground } = props
-
-  const user = useUser()
-
-  const themeClasses = (darkBackground ? 'text-white ' : '') + hoverClasses
+function SignedInHeaders(props: { user: User; themeClasses?: string }) {
+  const { user, themeClasses } = props
 
   return (
-    <>
-      {user ? (
     <>
       <Link href="/create">
         <a className={clsx('text-base font-medium', themeClasses)}>
@@ -30,15 +21,35 @@ function SignInLink(props: { darkBackground?: boolean }) {
         </a>
       </Link>
 
+      <Link href="/bets">
+        <a className={clsx('text-base font-medium', themeClasses)}>Your bets</a>
+      </Link>
+
       <Link href="/account">
         <a className={clsx('text-base font-medium', themeClasses)}>
-              Your account
+          <Row className="avatar items-center">
+            <div className="rounded-full w-10 h-10 mr-4">
+              <Image src={user.avatarUrl} width={40} height={40} />
+            </div>
+            <div>
+              {user.name}
+              <div className="text-gray-700 text-sm">
+                {formatMoney(user.balance)}
+              </div>
+            </div>
+          </Row>
         </a>
       </Link>
     </>
-      ) : (
-        <></>
-      )}
+  )
+}
+
+function SignedOutHeaders(props: { themeClasses?: string }) {
+  const { themeClasses } = props
+
+  return (
+    <>
+      <div className={clsx('text-base font-medium', themeClasses)}>Sign in</div>
     </>
   )
 }
@@ -46,55 +57,43 @@ function SignInLink(props: { darkBackground?: boolean }) {
 export function Header(props: { darkBackground?: boolean; children?: any }) {
   const { darkBackground, children } = props
 
+  const user = useUser()
+
+  const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
+
   return (
-    <div className="pt-6">
     <nav
-        className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 bg-dark-50"
+      className="max-w-7xl w-full flex flex-row mx-auto pt-5 px-4 sm:px-6"
       aria-label="Global"
     >
-        <div className="flex items-center flex-1">
-          <div className="flex items-center justify-between w-full md:w-auto">
       <Link href="/">
-              <a className="flex flex-row items-center align-items-center h-6 sm:h-10">
-                <div className="inline-block mr-3">
-                  <img
-                    className="h-6 sm:h-10 w-6 sm:w-10 hover:rotate-12 transition-all"
+        <a className="flex flex-row gap-3">
+          <Image
+            className="h-6 w-6 sm:h-10 sm:w-10 hover:rotate-12 transition-all"
             src="/logo-icon.svg"
+            width={40}
+            height={40}
           />
-                </div>
-                <span
+          <div
             className={clsx(
-                    'font-major-mono lowercase sm:text-2xl my-auto',
+              'font-major-mono lowercase mt-1 sm:text-2xl',
               darkBackground && 'text-white'
             )}
           >
             Mantic Markets
-                </span>
-              </a>
-            </Link>
           </div>
-
-          <div className="space-x-8 md:flex md:ml-16 mr-8">
-            {navigation.map((item) => (
-              <Link key={item.name} href={item.href}>
-                <a
-                  target="_blank"
-                  className={clsx(
-                    'text-base font-medium ' + hoverClasses,
-                    darkBackground ? 'text-white hover:decoration-teal-500' : ''
-                  )}
-                >
-                  {item.name}
         </a>
       </Link>
-            ))}
 
+      <Row className="gap-8 mt-1 md:ml-16 mr-8">
         {children}
 
-            <SignInLink darkBackground={darkBackground} />
-          </div>
-        </div>
+        {user ? (
+          <SignedInHeaders user={user} themeClasses={themeClasses} />
+        ) : (
+          <SignedOutHeaders themeClasses={themeClasses} />
+        )}
+      </Row>
     </nav>
-    </div>
   )
 }