[home][m]-implement minimal front page

components/Nav.tsx

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

components/home/Nav.tsx

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

components/home/Recent.tsx

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

components/search/Input.tsx

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

pages/[org]/[dataset]/index.tsx

@@ -2,7 +2,7 @@ import { GetServerSideProps } from 'next'
 import config from '../../../config'
 import utils from '../../../utils'
 import Head from 'next/head'
-import Nav from '../../../components/Nav'
+import Nav from '../../../components/home/Nav'
 import About from '../../../components/dataset/About'
 import Org from '../../../components/dataset/Org'
 import Resources from '../../../components/dataset/Resources'

pages/[org]/[dataset]/r/[resource]/index.tsx

@@ -4,7 +4,7 @@ const toArray = require('stream-to-array')
 import config from '../../../../../config'
 import utils from '../../../../../utils'
 import Head from 'next/head'
-import Nav from '../../../../../components/Nav'
+import Nav from '../../../../../components/home/Nav'
 import About from '../../../../../components/resource/About'
 import DataExplorer from '../../../../../components/resource/DataExplorer'
 import DataView from '../../../../../components/resource/DataView'

pages/index.tsx

@@ -1,27 +1,28 @@
 import Head from 'next/head'
-import Link from 'next/link'
-import Nav from '../components/Nav'
+import Nav from '../components/home/Nav'
+import Recent from '../components/home/Recent'
 import Input from '../components/search/Input'
 
 export default function Home() {
   return (
-    <>
+    <div className="container mx-auto">
       <Head>
         <title>Portal</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav />
-      <section className="flex mt-10 ml-40 justify-center">
+      <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
         <div>
-          <img src="/banner.png" width="500" />
-        </div>
-        <div className="mx-32">
-          <h1 className="text-4xl font-thin">Find, Share and Publish <br /> Quality Data with <span className="text-orange-500">Datahub</span>
+          <h1 className="text-4xl mb-3 font-thin">Find, Share and Publish <br /> Quality Data with <span className="text-orange-500">Datahub</span>
           </h1>
-          <p className="text-md font-light w-4/5">At Datahub, we have over thousands of datasets for free and a Premium Data Service for additional or customised data with guaranteed updates.</p>
+          <p className="text-md font-light mb-3 w-4/5">At Datahub, we have over thousands of datasets for free and a Premium Data Service for additional or customised data with guaranteed updates.</p>
           <Input query={{}} />
         </div>
+        <div className="mt-4">
+          <img src="/images/banner.svg" className="w-4/5" />
+        </div>
       </section>
-    </>
+      <Recent />
+    </div>
   )
 }

pages/search.tsx

@@ -3,7 +3,7 @@ import querystring from 'querystring'
 import config from '../config'
 import utils from '../utils'
 import Head from 'next/head'
-import Nav from '../components/Nav'
+import Nav from '../components/home/Nav'
 import Input from '../components/search/Input'
 import Total from '../components/search/Total'
 import Sort from '../components/search/Sort'

public/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g transform="translate(-395.882 247.118)"><rect width="64" height="64" rx="2" transform="translate(395.882 -247.118)" fill="#030303"/><text transform="translate(408.882 -221.118)" fill="#fff" font-size="20" font-family="AndaleMono, Andale Mono"><tspan x="0" y="0">POR</tspan><tspan x="0" y="22">TAL</tspan></text></g></svg>