[Components][s]: Re-arrange components folder
This commit is contained in:
Rising Odegua
parent
acd1c118a1
commit
2ffad0d80b
@ -1,94 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import filesize from 'filesize'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* KeyInfo component receives two arguments.
|
|
||||||
* @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields:
|
|
||||||
* {
|
|
||||||
* title: "Title of the data package",
|
|
||||||
* length: "The number of resources present in the data package"
|
|
||||||
* datasetSize: The combined size of the data package resources
|
|
||||||
* format: The format of resources in the dataset. e.g csv, json, excel
|
|
||||||
* created: The date the dataset was created
|
|
||||||
* updated: The date the dataset was last updated
|
|
||||||
* licence: The licence of the dataset
|
|
||||||
* sources: An array of the data set sources
|
|
||||||
* }
|
|
||||||
* @param {Array} resources A Frictionless datapackage resource array
|
|
||||||
* @returns React Component
|
|
||||||
*/
|
|
||||||
const KeyInfo = ({ descriptor, resources }) => {
|
|
||||||
let datasetSize = 0
|
|
||||||
if (resources) {
|
|
||||||
datasetSize = resources.length == 1 ?
|
|
||||||
resources[0].size :
|
|
||||||
resources.reduce((accumulator, currentValue) => {
|
|
||||||
return accumulator.size + currentValue.size
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section className="m-8" name="key-info" id="key-info">
|
|
||||||
<h1 data-testid="datasetTitle" className="text-3xl font-bold mb-8">
|
|
||||||
{descriptor.title}
|
|
||||||
</h1>
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Key info</h1>
|
|
||||||
<div className="grid grid-cols-7 gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Files</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Size</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Format</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Created</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Updated</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Licence</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Source</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-7 gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{resources.length}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{filesize(datasetSize, { bits: true })}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{resources[0].format} zip</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{descriptor.created}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{descriptor.updated}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{descriptor.license}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">
|
|
||||||
<a className="text-yellow-600"
|
|
||||||
href={descriptor.sources[0].web}>
|
|
||||||
{descriptor.sources[0].title}
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default KeyInfo
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ReadMe component displays the markdown description of a datapackage
|
|
||||||
* @param {string} readme parsed html of data package readme
|
|
||||||
* @returns React Component
|
|
||||||
*/
|
|
||||||
const ReadMe = ({ readmeHtml }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section className="m-8" name="sample-table">
|
|
||||||
<h1 className="text-2xl font-bold mb-4">README</h1>
|
|
||||||
<div className="prose">
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: readmeHtml }} />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReadMe
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import filesize from 'filesize'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ResourceInfo component displays all resources in a data package
|
|
||||||
* @param {Array} resources A Frictionless datapackage resource object
|
|
||||||
* @returns React Component
|
|
||||||
*/
|
|
||||||
const ResourcesInfo = ({ resources }) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section className="m-8" name="file-list">
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Data Files</h1>
|
|
||||||
<div className="grid grid-cols-7 gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">File</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Description</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Size</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Last Changed</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl font-bold mb-2">Download</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{resources.map((resource, index) => {
|
|
||||||
return (
|
|
||||||
<div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{resource.name}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{resource.description || "No description"}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{filesize(resource.size, { bits: true })}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">{resource.updated}</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-1xl">
|
|
||||||
<a className="text-yellow-600" href={`/dataset/${resource.path}`}>
|
|
||||||
{resource.format} ({filesize(resource.size, { bits: true })})
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ResourcesInfo
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import Link from 'next/link';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
const Nav = ({ logo, navMenu }) => {
|
|
||||||
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={logo} 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`}>
|
|
||||||
{navMenu.map((menu, index) => {
|
|
||||||
<Link href={menu.path} key={index}>
|
|
||||||
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
|
|
||||||
{menu.title}
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
})}
|
|
||||||
<Link href="/blog">
|
|
||||||
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
|
|
||||||
Blog
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
<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>
|
|
||||||
<a
|
|
||||||
href="http://tech.datopian.com/frontend/"
|
|
||||||
className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
Docs
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/datopian/portal"
|
|
||||||
className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Nav;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
const Recent = (datasets) => {
|
|
||||||
if (!datasets) {
|
|
||||||
return <></>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="my-10 mx-4 lg:my-20">
|
|
||||||
<h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
|
|
||||||
<div className="recent flex flex-col lg:flex-row">
|
|
||||||
{datasets.map((dataset, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
|
|
||||||
>
|
|
||||||
<h1 className="text-2xl font-thin">{dataset.title}</h1>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
{dataset.organization && dataset.organization.description}
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href={`/@${dataset.organization ? dataset.organization.name : 'dataset'
|
|
||||||
}/${dataset.name}`}
|
|
||||||
>
|
|
||||||
<a className="pt-3 flex justify-end text-orange-500">
|
|
||||||
View Dataset
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Recent;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user