Added initial homepage and new note page

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-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>
-  );
-}
-
-export default App;

src/Routes/Home/Home.tsx

@@ -0,0 +1,33 @@
+import styles from "../../styles";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+export default function Home() {
+  const navigate = useNavigate();
+  return (
+    <div style={styles.background}>
+      <div style={{ ...styles.header, ...{ height: "8vh" } }}>
+        <p style={styles.text_medium}>React - A Notes Demo</p>
+      </div>
+      <div style={styles.flex_column}>
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Note Title</p>
+          <div style={styles.note_content}>
+            <p style={styles.text_small}>Notes Content</p>
+          </div>
+        </div>
+      </div>
+      <div style={styles.flex_row}>
+        <Button
+          style={styles.button_add}
+          variant="contained"
+          onClick={() => {
+            navigate("/NewNote");
+          }}
+        >
+          Add Note
+        </Button>
+      </div>
+    </div>
+  );
+}

src/Routes/NewNote/NewNote.tsx

@@ -0,0 +1,35 @@
+import styles from "../../styles";
+import { Button } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import { useNavigate } from "react-router-dom";
+
+export default function NewNote() {
+  const navigate = useNavigate();
+  return (
+    <div style={styles.background}>
+      <div style={{ ...styles.header, ...{ height: "8vh" } }}>
+        <p style={styles.text_medium}>React - A Notes Demo</p>
+      </div>
+      <p style={styles.text_medium}>New Note</p>
+      <div style={styles.flex_column}>
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Note Title</p>
+          <div style={styles.note_content}>
+            <p style={styles.text_small}>Notes Content</p>
+          </div>
+        </div>
+      </div>
+      <div style={styles.flex_row}>
+        <Button
+          style={styles.button_remove}
+          variant="contained"
+          onClick={() => {
+            navigate("/");
+          }}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -1,15 +1,30 @@
-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 "./index.css";
+import reportWebVitals from "./reportWebVitals";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+import Home from "./Routes/Home/Home";
+import NewNote from "./Routes/NewNote/NewNote";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/NewNote",
+    element: <NewNote />,
+  },
+]);
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 

src/styles.tsx

@@ -0,0 +1,80 @@
+const styles: { [key: string]: React.CSSProperties } = {
+  background: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100vh",
+    backgroundColor: "#002d4c",
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "sticky",
+    backgroundColor: "#0087e4",
+    margin: "2vh",
+    padding: 8,
+    borderRadius: 4,
+  },
+  note: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#001018",
+    margin: "2vh",
+    width: "50%",
+    alignSelf: "center",
+    padding: 8,
+    borderRadius: 32,
+  },
+  note_content: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#00293e",
+    width: "90%",
+    margin: "2vh",
+    padding: 8,
+    paddingBottom: 64,
+    paddingTop: 64,
+    borderRadius: 4,
+  },
+  button_add: {
+    backgroundColor: "#0dbc6a",
+    alignSelf: "center",
+    display: "flex",
+    flexDirection: "row",
+    width: "128px",
+  },
+  button_remove: {
+    backgroundColor: "#bc231e",
+    alignSelf: "center",
+    display: "flex",
+    flexDirection: "row",
+    width: "128px",
+  },
+  text_small: {
+    color: "white",
+    fontSize: "2vh",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_medium: {
+    color: "white",
+    fontSize: "4vh",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  flex_column: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  flex_row: {
+    justifyContent: "center",
+    display: "flex",
+    flexDirection: "row",
+  },
+};
+
+export default styles;