navbar completed

.eslintrc.json

@@ -47,7 +47,7 @@
         "SwitchCase": 1
       }
     ],
-    "linebreak-style": ["warn", "unix"],
+    "linebreak-style": ["warn", "windows"],
     "quotes": ["error", "double", { "avoidEscape": true }],
     "semi": ["error", "always"]
   }

declaration.d.ts

@@ -0,0 +1,10 @@
+declare module '*.svg' {
+    import React = require('react');
+    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+    const src: string;
+    export default src;
+  }
+declare module "*.png" {
+    const value: any;
+    export default value;
+}

package.json

@@ -24,6 +24,7 @@
     "build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts",
     "build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts",
     "lint": "eslint src",
+    "lint-fix": "eslint src --ext .tsx --fix",
     "prepare": "husky install"
   },
   "eslintConfig": {

src/App.tsx

@@ -1,13 +1,17 @@
-import { ENV } from "./constants/env";
+import React from "react";
-import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import Home from "./components/home/Home";
 import Contacts from "./components/contacts/Contacts";
 import Calendar from "./components/calendar/Calendar";
 import Navbar from "./components/navbar/Navbar";
+import { ThemeProvider } from "@emotion/react";
+
+import Theme from "./Theme";
 
 const App: React.FC = () => {
   return (
+    <ThemeProvider theme={Theme}>
       <Router>
         <Navbar />
         <Routes>
@@ -16,6 +20,7 @@ const App: React.FC = () => {
           <Route path="/calendar" element={<Calendar />} />
         </Routes>
       </Router>
+    </ThemeProvider>
   );
 };
 

src/Theme.tsx

@@ -0,0 +1,14 @@
+import { createTheme } from "@mui/material/styles";
+
+export default createTheme({
+  palette: {
+    primary: {
+      // white
+      main: "#ffffff",
+    },
+    secondary: {
+      // red
+      main: "#DB00116",
+    },
+  },
+});

src/components/calendar/Calendar.tsx

@@ -1,5 +1,3 @@
-import { ENV } from "../../constants/env";
-
 const Calendar: React.FC = () => {
   return <span>Calendar</span>;
 };

src/components/contacts/Contacts.tsx

@@ -1,5 +1,3 @@
-import { ENV } from "../../constants/env";
-
 const Contacts: React.FC = () => {
   return <span>Contacts</span>;
 };

src/components/home/Home.tsx

@@ -1,7 +1,60 @@
-import { ENV } from "../../constants/env";
+import React from "react";
+import { Box, Button } from "@mui/material";
+import GroupsIcon from "@mui/icons-material/Groups";
+import AddIcon from "@mui/icons-material/Add";
+import CallIcon from "@mui/icons-material/Call";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 
 const Home: React.FC = () => {
-  return <span>Home</span>;
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        height: "75%",
+      }}
+    >
+      <Box sx={{ flexGrow: 1 }}>hi</Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <Box>
+          <Button
+            color="secondary"
+            variant="outlined"
+            startIcon={<GroupsIcon />}
+          ></Button>
+        </Box>
+        <Box>
+          <Button
+            color="secondary"
+            variant="outlined"
+            startIcon={<GroupsIcon />}
+          ></Button>
+        </Box>
+        <Box>
+          <Button
+            color="secondary"
+            variant="outlined"
+            startIcon={<GroupsIcon />}
+          ></Button>
+        </Box>
+        <Box>
+          <Button
+            color="secondary"
+            variant="outlined"
+            startIcon={<GroupsIcon />}
+          ></Button>
+        </Box>
+      </Box>
+    </Box>
+  );
 };
 
 export default Home;

src/components/navbar/Clock.tsx

@@ -0,0 +1,49 @@
+import { Typography } from "@mui/material";
+import Box, { BoxProps } from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import React, { useState, useEffect } from "react";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+
+const FormattedBox = styled(Box)<BoxProps>(({ theme }) => ({
+  marginRight: 12,
+}));
+
+const Clock: React.FC = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  useEffect(() => {
+    setInterval(() => setDate(new Date()), 30000);
+  }, []);
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <FormattedBox sx={{ mt: 0.5 }}>
+        <CalendarTodayIcon />
+      </FormattedBox>
+      <FormattedBox>
+        <Typography variant="h6" color="inherit">
+          {date.toLocaleDateString("en-GB", {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+          })}
+        </Typography>
+      </FormattedBox>
+      <FormattedBox sx={{ mt: 0.5 }}>
+        <AccessTimeIcon />
+      </FormattedBox>
+      <FormattedBox>
+        <Typography variant="h6" color="inherit">
+          {date.toLocaleString("en-US", {
+            hour: "numeric",
+            minute: "numeric",
+            hour12: true,
+          })}
+        </Typography>
+      </FormattedBox>
+    </Box>
+  );
+};
+
+export default Clock;

src/components/navbar/Navbar.tsx

@@ -1,21 +1,40 @@
-import { ENV } from "../../constants/env";
+import React from "react";
+import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
 
+import Clock from "./Clock";
+import pngLogo from "../../assets/logo-png.png";
+import { Page } from "./Page";
+
+const pages: Page[] = [
+  { name: "Home", url: "/" },
+  { name: "Contacts", url: "/contacts" },
+  { name: "Calendar", url: "/calendar" },
+];
+
 const Navbar: React.FC = () => {
   return (
-    <nav>
+    <AppBar position="static">
-      <ul>
+      <Toolbar variant="dense" disableGutters>
-        <li>
+        <IconButton disableRipple sx={{ mr: 2 }}>
-          <Link to="/">Home</Link>
+          <img src={pngLogo} alt="Kitty Katty!" style={{ maxWidth: 130 }} />
-        </li>
+        </IconButton>
-        <li>
+        {pages.map((page, i) => (
-          <Link to="/contacts">Contacts</Link>
+          <Box flexGrow={i == pages.length - 1 ? 1 : 0} sx={{ mr: 3 }}>
-        </li>
+            <Typography
-        <li>
+              variant="h6"
-          <Link to="/calendar">Calendar</Link>
+              color="inherit"
-        </li>
+              component={Link}
-      </ul>
+              to={page.url}
-    </nav>
+              sx={{ textDecoration: "none" }}
+            >
+              {page.name}
+            </Typography>
+          </Box>
+        ))}
+        <Clock />
+      </Toolbar>
+    </AppBar>
   );
 };
 

src/components/navbar/Page.tsx

@@ -0,0 +1,6 @@
+interface Page {
+  name: string;
+  url: string;
+}
+
+export type { Page };

src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,3 @@
-import { ENV } from "../../constants/env";
-
 const Sidebar: React.FC = () => {
   return <span>Sidebar</span>;
 };

tsconfig.json

@@ -66,6 +66,6 @@
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
     "types": ["node", "webpack-env"]
   },
-  "include": ["src"],
+  "include": ["src", "declaration.d.ts"],
   "exclude": ["node_modules", "build"]
 }

webpack.config.ts

@@ -61,6 +61,13 @@ const baseConfig: Configuration = {
         test: /\.svg$/,
         use: ["@svgr/webpack"],
       },
+      {
+        test: /\.(png|jpe?g|gif|jp2|webp)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+        },
+      },
     ],
   },