From 7db4c339c05d8e309425615b60098ef01c8cbac9 Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Thu, 29 Apr 2021 13:23:53 +0100
Subject: [PATCH] [Component][m]: Add ResourceInfo component

---
 .../src/components/page/ResourceInfo.js       | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 packages/portal/src/components/page/ResourceInfo.js

diff --git a/packages/portal/src/components/page/ResourceInfo.js b/packages/portal/src/components/page/ResourceInfo.js
new file mode 100644
index 00000000..94df28df
--- /dev/null
+++ b/packages/portal/src/components/page/ResourceInfo.js
@@ -0,0 +1,62 @@
+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
\ No newline at end of file