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 ( -
-
- - - FIO Analyzer - -
- -
-
-
- OVERVIEW -
-
- -
Job Browser
-
- -
- -
Download script
-
-
- -
-
- LIST ACTION -
-
- -
Compare selected
-
- -
- -
Delete selected
-
-
- -
-
- INFORMATION -
-
- -
Docs
-
- -
- -
About
-
-
- -
- -
- 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 ( +
+ +
{props.text}
+
+ ); +} 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 ( - - - - - - - - - - {props.results.map((result) => ( - - ))} -
- - Job NameTagsSubmitted atActions
- ); -} - -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 ( -
- -
{props.text}
-
- ); -} - -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 ( -
-
- - - - -
-
-
CONTENT
-
-
-
- - -
- ); -} - -export default DashboardLayout;