mode button

frontend/src/components/EntriesNavigation.js

@@ -1,5 +1,5 @@
-import React, { useRef, useEffect, useContext } from "react";
-import { Box, Flex, Spinner, Button, Center } from "@chakra-ui/react";
+import React, { useRef, useEffect, useContext, useState } from "react";
+import { Box, Flex, Spinner, Button, Center, Text } from "@chakra-ui/react";
 import { useJournalEntries, useJournalPermissions } from "../core/hooks";
 import EntryList from "./EntryList";
 import UIContext from "../core/providers/UIProvider/context";
@@ -9,6 +9,7 @@ const isContent = false;
 
 const EntriesNavigation = () => {
   const ui = useContext(UIContext);
+  const [mode, setMode] = useState("live");
 
   const { currentUserPermissions: permissions } = useJournalPermissions(
     `9b0d7567-4634-4bf7-946d-60ef4414aa93`,
@@ -85,6 +86,92 @@ const EntriesNavigation = () => {
           direction="column"
           flexGrow={1}
         >
+          <Flex h="3rem">
+            <Button
+              isActive={mode === "live"}
+              colorScheme="secondary"
+              bgColor="white.100"
+              textColor="primary.900"
+              _active={{
+                bgColor: "secondary.900",
+                textColor: "white.100",
+              }}
+              _hover={{
+                textColor: "white.100",
+                bgColor: "secondary.600",
+              }}
+              m={0}
+              h="100%"
+              w="50%"
+              borderRadius="0"
+              onClick={() => setMode("live")}
+            >
+              Live view
+            </Button>
+            <Button
+              m={0}
+              isActive={mode == "analysis"}
+              _active={{
+                bgColor: "secondary.900",
+                textColor: "white.100",
+              }}
+              _hover={{
+                textColor: "white.100",
+                bgColor: "secondary.600",
+              }}
+              bgColor="white.100"
+              textColor="primary.900"
+              colorScheme="secondary"
+              h="100%"
+              w="50%"
+              onClick={() => setMode("analysis")}
+              borderRadius="0"
+            >
+              Analysis view
+            </Button>
+          </Flex>
+          <Flex h="3rem" w="100%" bgColor="white.200">
+            <Flex
+              flexBasis="50px"
+              flexGrow={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text fontWeight="600">Status</Text>
+            </Flex>
+            <Flex
+              flexBasis="50px"
+              flexGrow={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text fontWeight="600">Source</Text>
+            </Flex>
+            <Flex
+              flexBasis="50px"
+              flexGrow={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text fontWeight="600">Alias</Text>
+            </Flex>
+            <Flex
+              flexBasis="50px"
+              flexGrow={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text fontWeight="600">Ammount</Text>
+            </Flex>
+            <Flex
+              flexBasis="50px"
+              flexGrow={1}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Text fontWeight="600">Date</Text>
+            </Flex>
+          </Flex>
           <Flex
             className="Scrollable"
             id="entryList"