Update headers

web/components/header.tsx

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