diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..ab28f3e
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+ "tabWidth": 4
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e41ede8..ff77063 100644
--- a/src/App.tsx
+++ b/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 (
-
+
);
}
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 8a47dad..e5de9c2 100644
--- a/src/components/Content.tsx
+++ b/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 (
-
-
-
-
- Job Browser
+export default function Content() {
+ return (
+
-
-
-
- );
+ );
}
-
-export default Content;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..dae7a7c
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,20 @@
+import { GitHub } from "react-feather";
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..eab91d7
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,25 @@
+import FIOLogo from "../assets/logo.svg";
+import ThemeToggle from "./ThemeToggle";
+
+export default function Header() {
+ return (
+
+ );
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..16efb9a
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,28 @@
+import { Book, FileText, Search } from "react-feather";
+import NavBarItem from "./NavBarItem";
+
+export default function NavBar() {
+ return (
+
+ );
+}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
deleted file mode 100644
index bfdae28..0000000
--- a/src/components/NavBar/NavBar.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
- Activity,
- BookOpen,
- Download,
- Info,
- List,
- Minimize2,
- Trash,
-} from "react-feather";
-
-function NavBar() {
- return (
-
-
-
-
-
-
-
-
- LIST ACTION
-
-
-
-
-
-
-
-
- INFORMATION
-
-
-
-
-
-
-
-
-
- OVHcloud © 2021
-
-
-
- );
-}
-
-export default NavBar;
diff --git a/src/components/NavBarItem.tsx b/src/components/NavBarItem.tsx
new file mode 100644
index 0000000..034d7a8
--- /dev/null
+++ b/src/components/NavBarItem.tsx
@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { IconProps } from "react-feather";
+
+type NavBarItemProps = {
+ href: string;
+ icon: FC
;
+ title: string;
+};
+
+export default function NavBarItem(props: NavBarItemProps) {
+ const NavBarIcon = props.icon;
+
+ return (
+
+ );
+}
diff --git a/src/components/ResultExplorer.jsx b/src/components/ResultExplorer.jsx
new file mode 100644
index 0000000..53a6494
--- /dev/null
+++ b/src/components/ResultExplorer.jsx
@@ -0,0 +1,70 @@
+import { Tag, XCircle, PlusCircle } from "react-feather";
+
+export default function Table(props) {
+ return (
+
+
+ {props.results.map((result) => (
+
+ ))}
+
+ );
+}
+
+function TableHeader() {
+ return (
+
+
+
+ |
+ Job Name |
+ Tags |
+ Submitted at |
+ Actions |
+
+ );
+}
+
+function TableLine(props) {
+ return (
+
+
+
+ |
+
+
+ {props.result.name}
+ |
+
+
+
+ {props.result.tags.map((tag, index) => (
+
+ ))}
+
+ |
+
+ {props.result.submitted_at} |
+
+
+
+ |
+
+ );
+}
+
+function TableTag(props) {
+ return (
+
+ );
+}
diff --git a/src/components/ResultExplorer/Line.tsx b/src/components/ResultExplorer/Line.tsx
deleted file mode 100644
index c9c4b26..0000000
--- a/src/components/ResultExplorer/Line.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PlusCircle, XCircle } from "react-feather";
-import ResultTag from "./Tag";
-
-type LineProps = {
- result: Result;
-};
-
-export type Result = {
- id: string;
- name: string;
- tags: string[];
- submitted_at: string;
-};
-
-function ResultLine(props: LineProps) {
- return (
-
-
-
- |
- {props.result.name} |
-
-
- {props.result.tags.map((tag, index) => (
-
- ))}
-
- |
- {props.result.submitted_at} |
-
-
- |
-
- );
-}
-
-export default ResultLine;
diff --git a/src/components/ResultExplorer/Table.tsx b/src/components/ResultExplorer/Table.tsx
deleted file mode 100644
index 6905c5f..0000000
--- a/src/components/ResultExplorer/Table.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import ResultLine from "./Line";
-import { Result } from "./Line";
-
-type TableProps = {
- results: Result[];
-};
-
-function ResultTable(props: TableProps) {
- return (
-
- );
-}
-
-export default ResultTable;
diff --git a/src/components/ResultExplorer/Tag.tsx b/src/components/ResultExplorer/Tag.tsx
deleted file mode 100644
index 76c15a9..0000000
--- a/src/components/ResultExplorer/Tag.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Tag } from "react-feather";
-
-type TagProps = {
- key: string;
- text: string;
-};
-
-function ResultTag(props: TagProps) {
- return (
-
- );
-}
-
-export default ResultTag;
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..bf84dd1
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,38 @@
+import { Component } from "react";
+import { Moon, Sun } from "react-feather";
+
+export default class ThemeToggle extends Component {
+ constructor(props) {
+ super(props);
+ this.handleLightModeClick = this.handleLightModeClick.bind(this);
+ this.handleDarkModeClick = this.handleDarkModeClick.bind(this);
+ this.state = { currentTheme: "light" };
+ }
+
+ handleLightModeClick() {
+ this.setState({ currentTheme: "light" });
+ }
+
+ handleDarkModeClick() {
+ this.setState({ currentTheme: "dark" });
+ }
+
+ render() {
+ const btnClass = "p-2 text-white opacity-80 hover:opacity-100 focus:outline-none transition duration-500 ease-in-out transform hover:-rotate-180";
+ const theme = this.state.currentTheme;
+
+ if (theme === "light") {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+}
diff --git a/src/views/Dashboard.jsx b/src/views/Dashboard.jsx
new file mode 100644
index 0000000..06e07cb
--- /dev/null
+++ b/src/views/Dashboard.jsx
@@ -0,0 +1,22 @@
+import Header from "../components/Header";
+import NavBar from "../components/NavBar";
+import Content from "../components/Content";
+import Footer from "../components/Footer";
+
+function Dashboard() {
+ return (
+
+ );
+}
+
+export default Dashboard;
diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
deleted file mode 100644
index 2a37b72..0000000
--- a/src/views/Dashboard.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import NavBar from "../components/NavBar/NavBar";
-import Content from "../components/Content";
-
-function Dashboard() {
- return (
-
-
-
-
- );
-}
-
-export default Dashboard;
diff --git a/src/views/Layout.js b/src/views/Layout.js
deleted file mode 100644
index ed444ba..0000000
--- a/src/views/Layout.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Book, FileText, GitHub, Moon, Search, Sun } from "react-feather";
-import FIOLogo from "../assets/logo.svg";
-
-function DashboardLayout() {
- return (
-
- );
-}
-
-export default DashboardLayout;