Implemented new layout in React (3-zones)

> Solving issue #10
> Components for each zone
> Small animation for Dark mode (linked to #2 | Need work)
> DarkMode via ThemeToogle ?
> Ported ResultExplorer (Need to add typescript #7)

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

src/App.tsx

@@ -1,9 +1,9 @@
 // import Dashboard from "./views/Dashboard";
-import DashboardLayout from './views/Layout';
+import Dashboard from './views/Dashboard';
 
 function App() {
   return (
-    <DashboardLayout/>
+    <Dashboard/>
   );
 }
 

src/components/Content.tsx

@@ -1,29 +1,12 @@
-import { Sun, Moon } from 'react-feather';
-import ResultTable from "./ResultExplorer/Table";
-
 import ResultListTest from "../assets/resultList.json";
+import ResultExplorer from './ResultExplorer'
 
-function Content() {
-  return (
-    <div className="flex flex-col w-screen">
-      <div className="flex-none bg-blue-600 h-12 flex justify-end items-center pr-8">
-        <div className="flex flex-row text-white">
-          <button className="hidden dark:visible">
-            <Sun />
-          </button>
-          <button className="visible dark:hidden">
-            <Moon />
-          </button>
-        </div>
-      </div>
-      <div className="flex-auto dark:bg-gray-600 p-4">
-        <div className="mb-3 pb-1 font-semibold text-2xl border-b-2 dark:text-white">
-          Job Browser
+export default function Content() {
+    return (
+        <div id="CONTENT" className="mt-5">
+            <div className="container mx-auto px-5">
+                <ResultExplorer results={ResultListTest}/>
+            </div>
         </div>
-        <ResultTable results={ResultListTest} />
-      </div>
-    </div>
-  );
+    );
 }
-
-export default Content;

src/components/Footer.tsx

@@ -0,0 +1,20 @@
+import { GitHub } from "react-feather";
+
+export default function Footer() {
+    return (
+        <div id="FOOTER" className="bg-blue-ovh-light py-5">
+            <div className="container mx-auto px-5">
+                <div className="flex flex-row justify-between">
+                    <div className="text-white font-light">OVHCloud © 2021</div>
+                    <a
+                        href="https://github.com/IMT-Atlantique-FIP2021/fiowebviewer-frontend"
+                        className="text-white font-light hover:underline flex group"
+                    >
+                        Source code available on
+                        <GitHub className="ml-2 opacity-80 group-hover:opacity-100" />
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/Header.tsx

@@ -0,0 +1,25 @@
+import FIOLogo from "../assets/logo.svg";
+import ThemeToggle from "./ThemeToggle";
+
+export default function Header() {
+    return (
+        <div id="HEADER" className="bg-blue-ovh-dark py-7">
+            <div className="container mx-auto px-5">
+                <div className="flex flex-row justify-between">
+                    <a
+                        id="BRAND"
+                        className="flex items-center text-white group"
+                        href="/"
+                    >
+                        <img src={FIOLogo} className="h-7" alt="" />
+                        <div className="font-bold text-2xl ml-1 mr-3">FLEX</div>
+                        <div className="font-light text-xl opacity-80 group-hover:opacity-100">
+                            Flexible I/O Explorer
+                        </div>
+                    </a>
+                    <ThemeToggle/>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/NavBar.tsx

@@ -0,0 +1,28 @@
+import { Book, FileText, Search } from "react-feather";
+import NavBarItem from "./NavBarItem";
+
+export default function NavBar() {
+    return (
+        <div id="NAVBAR" className="bg-blue-ovh-light">
+            <div className="container mx-auto">
+                <div className="flex flex-row">
+                    <NavBarItem
+                        href="/"
+                        icon={Search}
+                        title="Result Explorer"
+                    />
+
+                    <NavBarItem
+                        href="/"
+                        icon={FileText}
+                        title="Download Script"
+                    />
+
+                    <div className="flex-grow"></div>
+
+                    <NavBarItem href="/" icon={Book} title="Docs" />
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/NavBarItem.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { IconProps } from "react-feather";
+
+type NavBarItemProps = {
+    href: string;
+    icon: FC<IconProps>;
+    title: string;
+};
+
+export default function NavBarItem(props: NavBarItemProps) {
+    const NavBarIcon = props.icon;
+
+    return (
+        <div className="px-5">
+            <div className="text-white font-semibold py-4 opacity-70 hover:opacity-100 hover:border-gray-200 border-blue-ovh-light border-b-2">
+                <a href={props.href} className="flex flex-row items-center">
+                    <NavBarIcon className="mr-1 h-5" />
+                    {props.title}
+                </a>
+            </div>
+        </div>
+    );
+}

src/components/ResultExplorer.jsx

@@ -0,0 +1,70 @@
+import { Tag, XCircle, PlusCircle } from "react-feather";
+
+export default function Table(props) {
+    return (
+        <table className="shadow-md bg-white table-fixed w-full">
+            <TableHeader />
+            {props.results.map((result) => (
+                <TableLine key={result.id} result={result} />
+            ))}
+        </table>
+    );
+}
+
+function TableHeader() {
+    return (
+        <tr className="bg-green-600 text-white text-left border">
+            <th className="w-10 text-center">
+                <input type="checkbox" className="h-4 w-4" />
+            </th>
+            <th className="py-4 px-4 w-64">Job Name</th>
+            <th className="py-4 px-4">Tags</th>
+            <th className="py-4 w-32 text-center">Submitted at</th>
+            <th className="py-4 w-32 text-center">Actions</th>
+        </tr>
+    );
+}
+
+function TableLine(props) {
+    return (
+        <tr>
+            <td className="border py-2 text-center">
+                <input type="checkbox" className="h-4 w-4" />
+            </td>
+
+            <td className="border px-4 text-left truncate">
+                <a href={"/result/"+props.result.id}>{props.result.name}</a>
+            </td>
+
+            <td className="border px-4">
+                <div className="flex flex-row justify-start space-x-2 overflow-x-auto scrollbar-thin scrollbar-thumb-green-400 scrollbar-track-gray-200">
+                    {props.result.tags.map((tag, index) => (
+                        <TableTag key={index + "_" + tag} text={tag} />
+                    ))}
+                </div>
+            </td>
+
+            <td className="border px-4 text-xs">{props.result.submitted_at}</td>
+
+            <td className="border px-4">
+                <div className="flex flex-row justify-evenly">
+                    <button className="text-red-500">
+                        <XCircle />
+                    </button>
+                    <button className="text-blue-500">
+                        <PlusCircle />
+                    </button>
+                </div>
+            </td>
+        </tr>
+    );
+}
+
+function TableTag(props) {
+    return (
+        <div className="flex flex-row flex-none bg-gray-300 rounded-full px-2 my-1 items-center">
+            <Tag className="w-4 pr-1" />
+            <div className="font-bold text-black text-xs">{props.text}</div>
+        </div>
+    );
+}