open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract header to separate component

Browse Source
This commit is contained in:
Austin Chen 2021-12-07 10:56:40 -08:00
parent c6ab33bc4d
commit 57e799e8d3
2 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/components/header.tsx Normal file
View File

@ -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>
)
}

51
web/components/hero.tsx
View File

@ -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">