[dataset][m]: improved dataset page to have better layout + added more details to the mocks.

components/dataset/About.tsx

@@ -1,32 +1,31 @@
 export default function About({ datapackage }) {
   return (
     <>
-      <h1 className="text-4xl font-semibold text-primary">{ datapackage.title || datapackage.name }</h1>
+      <table className="table-auto w-full text-sm text-left my-6">
-      <table className="table info no-left-padding">
         <thead>
           <tr>
-            <th>Files</th>
+            <th className="px-4 py-2">Files</th>
-            <th>Size</th>
+            <th className="px-4 py-2">Size</th>
-            <th>Format</th>
+            <th className="px-4 py-2">Format</th>
-            <th>Created</th>
+            <th className="px-4 py-2">Created</th>
-            <th>Updated</th>
+            <th className="px-4 py-2">Updated</th>
-            <th>License</th>
+            <th className="px-4 py-2">License</th>
-            <th>Source</th>
+            <th className="px-4 py-2">Source</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td className="col-xs-1">{ datapackage.resources.length }</td>
+            <td className="px-4 py-2">{ datapackage.resources.length }</td>
-            <td className="col-xs-1">{ datapackage.size || 'N\A' }</td>
+            <td className="px-4 py-2">{ datapackage.size || 'N\A' }</td>
-            <td className="col-xs-2 format-list">
+            <td className="px-4 py-2">
-            
-            </td>
-            <td className="col-xs-2">{ datapackage.created }</td>
-            <td className="col-xs-2">{ datapackage.modified }</td>
-            <td className="col-xs-2">
 
             </td>
-            <td className="col-xs-2">
+            <td className="px-4 py-2">{ datapackage.created }</td>
+            <td className="px-4 py-2">{ datapackage.modified }</td>
+            <td className="px-4 py-2">
+
+            </td>
+            <td className="px-4 py-2">
 
             </td>
           </tr>

components/dataset/Org.tsx

@@ -2,8 +2,11 @@ import Link from 'next/link'
 
 export default function Org({ org }) {
   return (
-    <Link href={`/@${org.name}`}>
+    <organization>
-      <a className="text-2xl font-semibold text-primary">{ org.title || org.name }</a>
+      <img src={org.image_url} className="h-5 w-5 mr-2 inline-block" />
-    </Link>
+      <Link href={`/@${org.name}`}>
+        <a className="font-semibold text-primary underline">{ org.title || org.name }</a>
+      </Link>
+    </organization>
   )
 }

components/dataset/Resources.tsx

@@ -2,15 +2,39 @@ import Link from 'next/link'
 
 export default function Resources({ resources }) {
   return (
-    <ul>
+    <>
-      {resources.map((resource, index) => (
+      <h3 className="text-xl font-semibold">Data Files</h3>
-          <li key={index}>
+      <table className="table-auto w-full text-sm text-left mb-6">
-            <Link href={`r/${resource.name}`}>
+        <thead>
-              <a className="text-xl font-semibold text-primary">{ resource.title || resource.name }</a>
+          <tr>
-            </Link>
+            <th className="px-4 py-2">File</th>
-          </li>
+            <th className="px-4 py-2">Format</th>
-        )
+            <th className="px-4 py-2">Created</th>
-      )}
+            <th className="px-4 py-2">Updated</th>
-    </ul>
+            <th className="px-4 py-2">Link</th>
+          </tr>
+        </thead>
+        <tbody>
+          {resources.map((resource, index) => (
+              <tr key={index}>
+                <td className="px-4 py-2">
+                  <Link href={`r/${resource.name}`}>
+                    <a className="underline">{ resource.title || resource.name }</a>
+                  </Link>
+                </td>
+                <td className="px-4 py-2">{ resource.format }</td>
+                <td className="px-4 py-2">{ resource.created }</td>
+                <td className="px-4 py-2">{ resource.last_modified }</td>
+                <td className="px-4 py-2">
+                  <Link href={`r/${resource.name}`}>
+                    <a className="underline">Preview</a>
+                  </Link>
+                </td>
+              </tr>
+            )
+          )}
+        </tbody>
+      </table>
+    </>
   )
 }

mocks/index.js

@@ -7,13 +7,21 @@ const gdp = {
   "resources": [
     {
       "name": "gdp",
-      "title": "GDP data"
+      "title": "GDP data",
+      "format": "csv",
+      "created": "2019-03-07T12:00:36.273495",
+      "last_modified": "2020-05-07T12:00:36.273495"
     }
   ],
   "organization": {
     "title": "World Bank",
     "name": "world-bank",
-  }
+    "description": "The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.",
+    "created": "2019-03-07T11:51:13.758844",
+    "image_url": "https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg"
+  },
+  "metadata_created": "2019-03-07T11:56:19.696257",
+  "metadata_modified": "2019-03-07T12:03:58.817280"
 }
 
 const population = {
@@ -23,12 +31,18 @@ const population = {
   "resources": [
     {
       "name": "population",
-      "title": "Population data"
+      "title": "Population data",
+      "format": "csv",
+      "created": "2019-03-07T12:00:36.273495",
+      "last_modified": "2020-05-07T12:00:36.273495"
     }
   ],
   "organization": {
     "title": "World Bank",
     "name": "world-bank",
+    "description": "The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.",
+    "created": "2019-03-07T11:51:13.758844",
+    "image_url": "https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg"
   }
 }
 

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

@@ -1,6 +1,8 @@
 import { GetServerSideProps } from 'next'
 import config from '../../../config'
 import utils from '../../../utils'
+import Head from 'next/head'
+import Nav from '../../../components/Nav'
 import About from '../../../components/dataset/About'
 import Org from '../../../components/dataset/Org'
 import Resources from '../../../components/dataset/Resources'
@@ -8,9 +10,19 @@ import Resources from '../../../components/dataset/Resources'
 function Dataset({ datapackage }) {
   return (
     <>
-      <About datapackage={datapackage} />
+      <Head>
-      <Org org={datapackage.organization} />
+        <title>Portal | {datapackage.title || datapackage.name}</title>
-      <Resources resources={datapackage.resources} />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
+      <main className="p-6">
+        <h1 className="text-3xl font-semibold text-primary mb-2">
+          { datapackage.title || datapackage.name }
+        </h1>
+        <Org org={datapackage.organization} />
+        <About datapackage={datapackage} />
+        <Resources resources={datapackage.resources} />
+      </main>
     </>
   )
 }