Initial

src/App.tsx

@@ -1,26 +1,20 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { ThemeProvider } from "@mui/material";
+import { theme } from "./theme";
+import { Routes, Route } from "react-router-dom";
+import AppHeader from "./components/AppHeader";
+import Home from "./routes/Home";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return (
+        <ThemeProvider theme={theme}>
+            <AppHeader />
+            <Routes>
+                <Route path="/" element={<Home />} />
+                {/* <Route path="*" element={<NotFound404 />} /> */}
+            </Routes>
+        </ThemeProvider>
+    );
 }
 
 export default App;

src/components/AppHeader.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Container, Typography } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import RadarIcon from "@mui/icons-material/Radar";
+
+export default function AppHeader() {
+    return (
+        <>
+            <Container maxWidth={false} className="app-header">
+                <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
+                    <RadarIcon fontSize="large" className="icon" />
+                    <Typography component="h1">pingator</Typography>
+                </Stack>
+            </Container>
+        </>
+    );
+}

src/components/Dashboard.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Dashboard() {
+    return <h1>Hello world</h1>;
+}

src/index.tsx

@@ -1,19 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+import App from "./App";
+import "./scss/styles.scss";
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <Router>
+            <App />
+        </Router>{" "}
+    </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/routes/Home.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import Dashboard from "../components/Dashboard";
+
+export default function Home() {
+    return (
+        <Container maxWidth={false} className="main-container">
+            <Dashboard />
+        </Container>
+    );
+}

src/scss/_app-header.scss

@@ -0,0 +1,24 @@
+.app-header {
+    background-color: #15232d;
+    color: whitesmoke;
+    padding: 1rem 0 1rem 0;
+    box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.31);
+    margin-bottom: 1rem;
+    h1 {
+        font-size: 2rem;
+        letter-spacing: 5px;
+    }
+    .icon {
+        color: #08ab08;
+        animation: rotation 3s infinite linear;
+        @keyframes rotation {
+                from {
+                    transform: rotate(0deg);
+                }
+
+                to {
+                    transform: rotate(359deg);
+                }
+            }
+    }
+}

src/scss/_common.scss

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

src/scss/styles.scss

@@ -0,0 +1,2 @@
+@import "common";
+@import "app-header";

src/theme.ts

@@ -0,0 +1,58 @@
+import { createTheme } from "@mui/material";
+
+const PRIMARY_COLOR = "#0d6efd";
+const SECONDARY_COLOR = "#6c757d";
+const SUCCESS_COLOR = "#198754";
+const ERROR_COLOR = "#dc3545";
+const INFO_COLOR = "#0dcaf0";
+const WARNING_COLOR = "#ffc107";
+
+export const theme = createTheme({
+    palette: {
+        mode: "light",
+        primary: {
+            main: PRIMARY_COLOR,
+            contrastText: "#FFF",
+        },
+        secondary: {
+            main: SECONDARY_COLOR,
+            contrastText: "#FFF",
+        },
+        success: {
+            main: SUCCESS_COLOR,
+            contrastText: "#FFF",
+        },
+        error: {
+            main: ERROR_COLOR,
+            contrastText: "#FFF",
+        },
+        info: {
+            main: INFO_COLOR,
+            contrastText: "#000",
+        },
+        warning: {
+            main: WARNING_COLOR,
+            contrastText: "#000",
+        },
+    },
+    typography: {
+        h1: {
+            fontSize: "2.7rem",
+        },
+        h2: {
+            fontSize: "2.4rem",
+        },
+        h3: {
+            fontSize: "2.1rem",
+        },
+        h4: {
+            fontSize: "1.8rem",
+        },
+        h5: {
+            fontSize: "1.5rem",
+        },
+        h6: {
+            fontSize: "1.2rem",
+        },
+    },
+});