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

[showcase][s]-add-showcase-page

Browse Source
This commit is contained in:
Gift Egwuenu 2020-05-27 10:37:58 +01:00
parent 24dd199b7a
commit a1d78a077e
7 changed files with 954 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

837
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
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
View File

@ -2,62 +2,108 @@ import Head from 'next/head'
export default function Showcase() {
return (
<div className="container">
<div className="container mx-auto">
<Head>
<title>Showcase</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">
Showcase Page
</h1>
<p className="description">
Get started with Next.js
</p>
<div className="grid">
<a href="https://nextjs.org/docs" className="card">
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className="card">
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/zeit/next.js/tree/master/examples"
className="card"
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className="card"
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
<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>
</main>
<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-6 py-4">File</th>
<th className="px-6 py-4">Description</th>
<th className="px-6 py-4">Size</th>
<th className="px-6 py-4">Last changed</th>
<th className="px-6 py-4">Download</th>
</thead>
<tbody>
<tr>
<td className="pr-6 py-4">
<i className="far fa-file-alt"></i> <a href="#{{item.slug}}" className="anchor-link" title="{{item.resource.title or item.resource.name}}">#</a>
</td>
<td className="px-6 py-4" title="{{ item.resource.descriptionHtml or item.resource.title }}">
</td>
<td className="px-6 py-4" title="{{ item.resource.sizeFormatted }}">
</td>
<td className="px-6 py-4" title="{{ item.resource.modified }}">
</td>
<td className="download truncate px-6 py-4">
<a href="#">
</a>
<a href="#">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style jsx>{`
.logo {
height: 1em;
}
<footer>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
</a>
</footer>
@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: [],
}