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

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

Browse Source
This commit is contained in:
anuveyatsu 2020-06-12 18:27:25 +06:00
parent 3f8a755d25
commit f16a8339a8
5 changed files with 89 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/dataset/About.tsx
View File

@ -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 info no-left-padding">
<table className="table-auto w-full text-sm text-left my-6">
<thead>
<tr>
<th>Files</th>
<th>Size</th>
<th>Format</th>
<th>Created</th>
<th>Updated</th>
<th>License</th>
<th>Source</th>
<th className="px-4 py-2">Files</th>
<th className="px-4 py-2">Size</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">License</th>
<th className="px-4 py-2">Source</th>
</tr>
</thead>
<tbody>
<tr>
<td className="col-xs-1">{ datapackage.resources.length }</td>
<td className="col-xs-1">{ datapackage.size || 'N\A' }</td>
<td className="col-xs-2 format-list">
</td>
<td className="col-xs-2">{ datapackage.created }</td>
<td className="col-xs-2">{ datapackage.modified }</td>
<td className="col-xs-2">
<td className="px-4 py-2">{ datapackage.resources.length }</td>
<td className="px-4 py-2">{ datapackage.size || 'N\A' }</td>
<td className="px-4 py-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>

9
components/dataset/Org.tsx
View File

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

44
components/dataset/Resources.tsx
View File

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

20
mocks/index.js
View File

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

18
pages/[org]/[dataset]/index.tsx
View File

@ -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} />
<Org org={datapackage.organization} />
<Resources resources={datapackage.resources} />
<Head>
<title>Portal | {datapackage.title || datapackage.name}</title>
<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>
</>
)
}