Merge pull request #3 from datopian/feat/showcase-page

Feat/showcase page
This commit is contained in:
Gift Egwuenu 2020-05-27 10:51:38 +01:00 committed by GitHub
commit f23a35d6f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 1004 additions and 0 deletions

837
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -19,7 +19,9 @@
"@types/react": "^16.9.35",
"babel-jest": "^26.0.1",
"jest": "^26.0.1",
"postcss-preset-env": "^6.7.0",
"react-test-renderer": "^16.13.1",
"tailwindcss": "^1.4.6",
"typescript": "^3.9.3"
}
}

146
pages/@myorg/myDataset.tsx Normal file
View File

@ -0,0 +1,146 @@
import Head from 'next/head'
export default function Showcase() {
return (
<div className="container mx-auto">
<Head>
<title>Showcase</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="my-16">
<div className="showcase-page-header">
<h1 className="text-4xl">
Agricultural Production Statistics
</h1>
<p className="publisher flex">
<img src="https://www.gravatar.com/avatar/none?d=https%3A%2F%2Ftesting.datahub.io%2Fstatic%2Fimg%2Flogo-cube03.png" className="rounded-full w-6 mr-2" />
<a href="#" className="text-orange-400">Stats New Zealand</a>
</p>
<table className="table-auto my-6">
<thead>
<tr>
<th className="pr-10 py-2">Files</th>
<th className="px-10 py-2">Size</th>
<th className="px-10 py-2">Format</th>
<th className="px-10 py-2">Created</th>
<th className="px-10 py-2">Updated</th>
<th className="px-10 py-2">License</th>
<th className="px-10 py-2">Source</th>
</tr>
</thead>
<tbody>
<tr>
<td className="pr-10 py-2">3</td>
<td className="px-10 py-2">N/A</td>
<td className="px-10 py-2">text xls</td>
<td className="px-10 py-2">2020-05-27</td>
<td className="px-10 py-2">a few seconds ago</td>
<td className="px-10 py-2">cc-by</td>
<td className="px-10 py-2">Stats New Zealand</td>
</tr>
</tbody>
</table>
<div className="mb-10"> These releases contain information on farming in New Zealand - including livestock and arable farming, horticulture, and forestry. Agricultural production statistics are produced in collaboration with the Ministry for Primary Industries.<a href="#readme" className="underline"> Read more</a></div>
<a href="#data" className="bg-black text-white py-4 px-4 rounded-sm mr-2 hover:border-0 hover:border-black hover:text-black hover:bg-transparent">Download</a>
<a href="#data-cli" className="border border-black text-black py-4 px-4 rounded-sm">Developers</a>
</div>
<div className="my-16">
<h2 className="text-3xl" id="data">Data Files</h2>
<p>Download files in this dataset</p>
<table className="table-auto">
<thead>
<th className="pr-10 text-left py-4">File</th>
<th className="px-10 text-left py-4">Description</th>
<th className="px-10 text-left py-4">Size</th>
<th className="px-10 text-left py-4">Last changed</th>
<th className="px-10 text-left py-4">Download</th>
</thead>
<tbody>
<tr className="bg-gray-100 text-sm">
<td className="pr-10 py-4">
<i className="far fa-file-alt"></i> <a href="#" className="anchor-link">Dataset Metadata</a>
</td>
<td className="px-10 py-4">
Dataset's Metadata
</td>
<td className="px-10 py-4" title="{{ item.resource.sizeFormatted }}">
</td>
<td className="px-10 py-4" title="{{ item.resource.modified }}">
Invalid Date
</td>
<td className="download truncate px-10 py-4">
<a href="#">
Text
</a>
</td>
</tr>
<tr className="text-sm">
<td className="pr-10 py-4">
<i className="far fa-file-alt"></i> <a href="#" className="anchor-link">Dataset Metadata</a>
</td>
<td className="px-10 py-4">
Dataset's Metadata
</td>
<td className="px-10 py-4" title="{{ item.resource.sizeFormatted }}">
</td>
<td className="px-10 py-4" title="{{ item.resource.modified }}">
Invalid Date
</td>
<td className="px-10 py-4">
<a href="#">
Text
</a>
</td>
</tr>
<tr className="bg-gray-100 text-sm">
<td className="pr-10 py-4">
<i className="far fa-file-alt"></i> <a href="#" className="anchor-link">Dataset Metadata</a>
</td>
<td className="px-10 py-4">
Dataset's Metadata
</td>
<td className="px-10 py-4" title="{{ item.resource.sizeFormatted }}">
</td>
<td className="px-10 py-4" title="{{ item.resource.modified }}">
Invalid Date
</td>
<td className="download truncate px-10 py-4">
<a href="#">
Text
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style jsx>{`
.logo {
height: 1em;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
)
}

5
pages/_app.js Normal file
View File

@ -0,0 +1,5 @@
import '../styles/index.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

3
postcss.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
plugins: ['tailwindcss', 'postcss-preset-env'],
}

3
styles/index.css Normal file
View File

@ -0,0 +1,3 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

8
tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}