[Components][s]: Add components for creating dataset page

src/components/dataset/DataExplorer.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+/**
+ * Opens a frictionless resource in data explorer. Data explorer gives you
+ * an interface to interact with a resource. That means you can do things like 
+ * data filtering, sorting, e.t.c
+ * @param {object} resource A frictionless Data resource
+ * @returns React component
+ */
+const DataExplorer = ({ resource }) => {
+    // TODO: Add data explorer code
+    return <>{JSON.stringify(resource)}</>;
+};
+
+DataExplorer.propTypes = {
+    resource: PropTypes.object.isRequired
+}
+export default DataExplorer;

src/components/dataset/KeyInfo.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import filesize from 'filesize'
+import PropTypes from 'prop-types';
+
+/**
+ * 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>
+
+        </>
+    )
+}
+
+KeyInfo.propTypes = {
+    descriptor: PropTypes.object.isRequired,
+    resources: PropTypes.array.isRequired
+}
+export default KeyInfo

src/components/dataset/Org.js

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import React from 'react'
+import PropTypes from 'prop-types';
+
+/**
+ * Displays information about an organization in a dataset page
+ * @param {Object} props object describing the dataset organization. 
+ * organization: {
+ *   image_url: The image url of the organization
+ *   name: The name of the organization
+ *   title: The title of the organization
+ * } 
+ * @returns 
+ */
+const Org = ({ organization }) => {
+  return (
+    <>
+      {organization ? (
+        <>
+          <img
+            src={
+              organization.image_url ||
+              'https://datahub.io/static/img/datahub-cube-edited.svg'
+            }
+            className="h-5 w-5 mr-2 inline-block"
+            alt="org_img"
+          />
+          <Link href={`/@${organization.name}`}>
+            <a className="font-semibold text-primary underline">
+              {organization.title || organization.name}
+            </a>
+          </Link>
+        </>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+Org.propTypes = {
+  organization: PropTypes.object.isRequired
+}
+
+export default Org;

src/components/dataset/Readme.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * 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>
+        </>
+    )
+}
+
+ReadMe.propTypes = {
+    readmeHtml: PropTypes.string.isRequired
+}
+
+export default ReadMe

src/components/dataset/ResourceInfo.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import filesize from 'filesize'
+import PropTypes from 'prop-types';
+
+/**
+ * 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>
+        </>
+    )
+}
+
+
+ResourcesInfo.propTypes = {
+    resources: PropTypes.array.isRequired
+}
+export default ResourcesInfo