feat(footer): add navbar and footer

src/App.tsx

@@ -12,6 +12,7 @@ import Register from "@/scenes/register";
 import NotFound from "@/scenes/notfound";
 import Contact from "@/scenes/contact";
 import Page from "@/scenes/page";
+import Footer from "@/scenes/footer";
 
 function App() {
   const theme = useMemo(() => createTheme(themeSettings), [])
@@ -31,7 +32,8 @@ function App() {
               <Route path="/contact" element={<Contact />} />
               <Route path="/pages/:page" element={<Page />} />
               <Route path="*" element={<NotFound />} />
-              </Routes>
+            </Routes>
+            <Footer />
           </Box>
         </ThemeProvider>
       </BrowserRouter>

src/components/FlexBetween.tsx

@@ -0,0 +1,6 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/system";
+const FlexBetween = styled(Box)({
+    display:"flex", justifyContent:"space-between", alignItems:"center"
+});
+export default FlexBetween;

src/scenes/dashboard/index.tsx

@@ -1,10 +1,12 @@
+import { Box, useTheme } from "@mui/material";
 
-function Dashboard() {
-    return (
-        <>
+type Props = {}
+
+const Dashboard = (props: Props) => {
+    const { palette } = useTheme()
+    return <Box color={ palette.grey[300]}>
         Dashboard
-        </>
-    )
+    </Box>
 }
 
 export default Dashboard;

src/scenes/footer/index.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import {Link} from 'react-router-dom';
+import { Box, Typography, useTheme } from '@mui/material';
+import DiamondIcon from '@mui/icons-material/Diamond';
+import FlexBetween from "@/components/FlexBetween";
+type Props = {};
+
+const Footer = (props: Props) => {
+    const { palette } = useTheme();
+    const [selected, setSelected] = useState("dashboard");
+    return <FlexBetween mb="0.25rem" p="0.5rem 0rem" color={palette.grey[300]}>
+        <FlexBetween gap="0.75rem">
+            <DiamondIcon sx={{ fontSize: "30px"}} />
+            <Typography variant="h4" fontSize="16px">
+                Banky
+            </Typography>
+        </FlexBetween>
+        <FlexBetween gap="2rem">
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/contact" onClick={() => setSelected("contact")} style={{ color: selected === "contact" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    contact
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/about" onClick={() => setSelected("about")} style={{ color: selected === "about" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    about
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/pages/cgv" onClick={() => setSelected("pages/cgv")} style={{ color: selected === "pages/cgv" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    cgv
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/pages/legal" onClick={() => setSelected("pages/legal")} style={{ color: selected === "pages/cgv" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    legal
+                </Link>
+            </Box>
+            <Box></Box>
+        </FlexBetween>
+    </FlexBetween>
+}
+
+export default Footer;

src/scenes/navbar/index.tsx

@@ -1,10 +1,44 @@
+import { useState } from "react";
+import {Link} from 'react-router-dom';
+import { Box, Typography, useTheme } from '@mui/material';
+import DiamondIcon from '@mui/icons-material/Diamond';
+import FlexBetween from "@/components/FlexBetween";
+type Props = {};
 
-function Navbar() {
-    return (
-        <>
-        Navbar
-        </>
-    )
+const Navbar = (props: Props) => {
+    const { palette } = useTheme();
+    const [selected, setSelected] = useState("dashboard");
+    return <FlexBetween mb="0.25rem" p="0.5rem 0rem" color={palette.grey[300]}>
+        <FlexBetween gap="0.75rem">
+            <DiamondIcon sx={{ fontSize: "30px"}} />
+            <Typography variant="h4" fontSize="16px">
+                Banky
+            </Typography>
+        </FlexBetween>
+        <FlexBetween gap="2rem">
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/" onClick={() => setSelected("dashboard")} style={{ color: selected === "dashboard" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    dashboard
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/predictions" onClick={() => setSelected("predictions")} style={{ color: selected === "predictions" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    predictions
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/login" onClick={() => setSelected("predictions")} style={{ color: selected === "login" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                    login
+                </Link>
+            </Box>
+            <Box sx={{ "&:hover": { color: palette.primary[100]}}}>
+                <Link to="/signup" onClick={() => setSelected("signup")} style={{ color: selected === "signup" ? "inherit": palette.grey[700], textDecoration: "inherit"}}>
+                signup
+                </Link>
+            </Box>
+            <Box></Box>
+        </FlexBetween>
+    </FlexBetween>
 }
 
 export default Navbar;