From 945fff57ab5d3b6bed40b9bbdec41cabb4449aa6 Mon Sep 17 00:00:00 2001
From: Gift Egwuenu <laurandidi21@gmail.com>
Date: Thu, 28 May 2020 08:55:23 +0100
Subject: [PATCH] [preview][s]: add a data preview page

 - Adjust styling in showcase page
---
 pages/@myorg/myDataset.tsx |  52 +++---------------
 pages/@myorg/preview.tsx   | 108 +++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 44 deletions(-)
 create mode 100644 pages/@myorg/preview.tsx

diff --git a/pages/@myorg/myDataset.tsx b/pages/@myorg/myDataset.tsx
index b9346b0b..2aa5e901 100644
--- a/pages/@myorg/myDataset.tsx
+++ b/pages/@myorg/myDataset.tsx
@@ -10,11 +10,11 @@ export default function Showcase() {
       <div className="my-16">
         <div className="showcase-page-header">
           <h1 className="text-4xl">
-            Agricultural Production Statistics
-            </h1>
+            Remuneración octubre 2017
+          </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>
+            <a href="#" className="text-orange-400">Datos Abiertos Municipio Loja Ecuador</a>
           </p>
           <table className="table-auto my-6">
             <thead>
@@ -35,12 +35,12 @@ export default function Showcase() {
                 <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>
+                <td className="px-10 py-2 text-orange-500">cc-by</td>
+                <td className="px-10 py-2">Datos Abiertos Municipio Loja Ecuador</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>
+          <div className="mb-10"> Contiene información sobre las remuneraciones de los servidores de la institución, correspondiente al mes de octubre del año 2017.</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>
@@ -58,10 +58,10 @@ export default function Showcase() {
             <tbody>
               <tr className="bg-gray-100 text-sm">
                 <td className="pr-10 py-4 text-orange-500">
-                  <i className="far fa-file-alt"></i> <a href="#" className="anchor-link">Dataset Metadata</a>
+                  <i className="far fa-file-alt"></i> <a href="/@myorg/preview" className="anchor-link">Remuneración octubre 2017</a>
                 </td>
                 <td className="px-10 py-4">
-                  Dataset's Metadata
+                  Remuneración octubre 2017
                 </td>
                 <td className="px-10 py-4" title="{{ item.resource.sizeFormatted }}">
                 </td>
@@ -74,42 +74,6 @@ export default function Showcase() {
                   </a>
                 </td>
               </tr>
-              <tr className="text-sm">
-                <td className="pr-10 py-4 text-orange-500">
-                  <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 text-orange-500">
-                  <a href="#">
-                    Xls
-                  </a>
-                </td>
-              </tr>
-              <tr className="bg-gray-100 text-sm">
-                <td className="pr-10 py-4 text-orange-500">
-                  <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">
-                </td>
-                <td className="px-10 py-4">
-                  Invalid Date
-                </td>
-                <td className="px-10 py-4 text-orange-500">
-                  <a href="#">
-                    Data File
-                  </a>
-                </td>
-              </tr>
             </tbody>
           </table>
         </div>
diff --git a/pages/@myorg/preview.tsx b/pages/@myorg/preview.tsx
new file mode 100644
index 00000000..718a26ac
--- /dev/null
+++ b/pages/@myorg/preview.tsx
@@ -0,0 +1,108 @@
+import Head from 'next/head'
+import Link from 'next/link'
+
+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="my-16">
+          <h2 className="text-3xl pb-2" id="data">Remuneración octubre 2017</h2>
+          <p className="text-2xl my-4 font-light">Field Information</p>
+          <table className="table-auto border text-sm mb-2">
+            <thead>
+              <th className="px-5 w-2/5 text-left py-4 border">Field Name</th>
+              <th className="px-5 w-1/5 text-left py-4 border">Order</th>
+              <th className="px-5 w-1/6 text-left py-4 border">Type(Format)</th>
+              <th className="px-5 w-1/5 text-left py-4 border">Description</th>
+            </thead>
+            <tbody>
+              <tr className="bg-gray-200 text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  No.
+                </td>
+                <td className="px-5 py-4 border">
+                  1
+                </td>
+                <td className="px-5 py-4 border">
+                  any
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+              <tr className="text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  Puesto institucional
+                </td>
+                <td className="px-5 py-4 border">
+                  2
+                </td>
+                <td className="px-5 py-4 border">
+                  string
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+              <tr className="bg-gray-200 text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  Régimen laboral al que pertenece	
+                </td>
+                <td className="px-5 py-4 border">
+                  3
+                </td>
+                <td className="px-5 py-4 border">
+                  string
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+              <tr className="text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  Número de partida presupuestaria
+                </td>
+                <td className="px-5 py-4 border">
+                  4
+                </td>
+                <td className="px-5 py-4 border">
+                  string
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+              <tr className="bg-gray-200 text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  Grado jerárquico o escala al que pertenece el puesto	
+                </td>
+                <td className="px-5 py-4 border">
+                  5
+                </td>
+                <td className="px-5 py-4 border">
+                  any
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+              <tr className="text-sm border">
+                <td className="px-5 py-4 border font-bold">
+                  Remuneración mensual unificacada	
+                </td>
+                <td className="px-5 py-4 border">
+                  6
+                </td>
+                <td className="px-5 py-4 border">
+                  any
+                </td>
+                <td className="px-5 py-4 border">
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <a href="/@myorg/myDataset" className="text-orange-600 underline">Go back</a>
+        </div>
+      </div>
+    </div>
+  )
+}