From 57e799e8d37ba2ff218ee823ce4dae35dfa9609f Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 7 Dec 2021 10:56:40 -0800
Subject: [PATCH] Extract header to separate component

---
 web/components/header.tsx | 52 +++++++++++++++++++++++++++++++++++++++
 web/components/hero.tsx   | 51 ++------------------------------------
 2 files changed, 54 insertions(+), 49 deletions(-)
 create mode 100644 web/components/header.tsx

diff --git a/web/components/header.tsx b/web/components/header.tsx
new file mode 100644
index 00000000..f2231d9d
--- /dev/null
+++ b/web/components/header.tsx
@@ -0,0 +1,52 @@
+import { Popover } from '@headlessui/react'
+import Link from 'next/link'
+
+const navigation = [
+  {
+    name: 'About',
+    href: 'https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea',
+  },
+  { name: 'Simulator', href: '/simulator' },
+]
+
+export function Header() {
+  return (
+    <Popover as="header" className="relative">
+      <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"
+          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="inline-grid grid-flow-col align-items-center h-6 sm:h-10">
+                  <img
+                    className="w-auto h-6 sm:h-10 inline-block mr-3"
+                    src="/logo-icon.svg"
+                  />
+                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">
+                    Mantic Markets
+                  </span>
+                </a>
+              </Link>
+            </div>
+
+            <div className="space-x-8 md:flex md:ml-16">
+              {navigation.map((item) => (
+                <Link href={item.href}>
+                  <a
+                    key={item.name}
+                    className="text-base font-medium text-white hover:text-gray-300"
+                  >
+                    {item.name}
+                  </a>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </nav>
+      </div>
+    </Popover>
+  )
+}
diff --git a/web/components/hero.tsx b/web/components/hero.tsx
index 07df912f..e218d696 100644
--- a/web/components/hero.tsx
+++ b/web/components/hero.tsx
@@ -1,57 +1,10 @@
-import { Popover } from '@headlessui/react'
 import { ConvertKitEmailForm } from './convert-kit-email-form'
-
-const navigation = [
-  {
-    name: 'About',
-    href: 'https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea',
-  },
-  { name: 'Simulator', href: 'https://simulator.mantic.markets' },
-]
+import { Header } from './header'
 
 export const Hero = () => {
   return (
     <div className="relative overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900">
-      {/* <div className="absolute w-full h-full overflow-hidden bg-world-trading bg-cover bg-gray-900 z--1" /> */}
-
-      <Popover as="header" className="relative">
-        <div className="pt-6">
-          <nav
-            className="relative max-w-7xl mx-auto flex items-center justify-between 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">
-                <a
-                  href="#"
-                  className="inline-grid grid-flow-col align-items-center h-6 sm:h-10"
-                >
-                  <img
-                    className="w-auto h-6 sm:h-10 inline-block mr-3"
-                    src="/logo-icon.svg"
-                  />
-                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">
-                    Mantic Markets
-                  </span>
-                </a>
-              </div>
-
-              <div className="space-x-8 md:flex md:ml-16">
-                {navigation.map((item) => (
-                  <a
-                    key={item.name}
-                    href={item.href}
-                    className="text-base font-medium text-white hover:text-gray-300"
-                  >
-                    {item.name}
-                  </a>
-                ))}
-              </div>
-            </div>
-          </nav>
-        </div>
-      </Popover>
-
+      <Header />
       <main>
         <div className="pt-40 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
           <div className="mx-auto max-w-7xl lg:px-8">