knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[home][m]-implement minimal front page

Browse Source
This commit is contained in:
Gift Egwuenu
2020-06-15 15:19:55 +01:00
parent bb22cac696
commit 04128bc22c
10 changed files with 93 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/Nav.tsx
View File

@@ -1,35 +0,0 @@
import Link from 'next/link'
export default function Nav() {
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-6">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<span className="font-semibold text-xl tracking-tight">Portal</span>
</div>
<div className="block lg:hidden">
<button className="flex items-center px-3 py-2 border rounded text-gray-700 border-teal-400 hover:text-black hover:border-black">
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div className="text-sm lg:flex-grow">
<Link href="/search">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-4">
Search
</a>
</Link>
<Link href="http://tech.datopian.com/frontend/">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-4" target="_blank">
Docs
</a>
</Link>
</div>
<div>
<Link href="https://github.com/datopian/portal">
<a className="inline-block text-sm px-4 py-2 leading-none border rounded text-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0">Code</a>
</Link>
</div>
</div>
</nav>
)
}

39
components/home/Nav.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Link from 'next/link'
import React, { useState } from 'react'
export default function Nav() {
const [open, setOpen] = useState(false)
const handleClick = (event) => {
event.preventDefault()
setOpen(!open)
}
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<img src="./images/logo.svg" alt="portal logo" width="40" />
</div>
<div className="block lg:hidden mx-4">
<button onClick={handleClick} className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black">
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div className={`${open ? `block` : `hidden`} lg:block`}>
<Link href="/search">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6">
Search
</a>
</Link>
<Link href="http://tech.datopian.com/frontend/">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6" target="_blank">
Docs
</a>
</Link>
<Link href="https://github.com/datopian/portal">
<a className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0">GitHub</a>
</Link>
</div>
</nav>
)
}

35
components/home/Recent.tsx Normal file
View File

@@ -0,0 +1,35 @@
import Link from 'next/link'
export default function Recent() {
return (
<section className="my-10 mx-4 lg:my-20">
<h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
<div className="flex flex-col lg:flex-row">
<div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
</Link>
</div>
<div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
</Link>
</div>
<div className="border px-4 mb-4 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500 mb-2">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
</Link>
</div>
</div>
</section>
)
}

5
components/search/Input.tsx
View File

@@ -19,7 +19,7 @@ export default function Input({ query }) {
}
return (
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} className="flex items-center">
<input
type='text'
name='q'
@@ -27,8 +27,9 @@ export default function Input({ query }) {
onChange={handleChange}
placeholder='Search'
aria-label='Search'
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button onClick={handleSubmit} className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0">Search</button>
</form>
)
}