added all function components

Author: Hannah Dunsmore

package-lock.json

@@ -7,8 +7,9 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
     "@types/react-dom": "^19.1.5",
-    "dotenv": "^16.5.0",
+    "dayjs": "^1.11.13",
     "react": "^19.1.0",
+    "react-datepicker": "^8.3.0",
     "react-dom": "^19.1.0",
     "react-responsive-carousel": "^3.2.23",
     "react-router": "^7.6.0",
@@ -60,7 +61,6 @@
     "eslint-plugin-prettier": "^5.2.1",
     "globals": "^15.14.0",
     "jest": "^27.5.1",
-    
     "prettier": "3.4.2",
     "sass": "^1.85.0",
     "typescript-eslint": "^8.20.0"

package.json

@@ -1,10 +1,34 @@
 import React from "react";
 import "./App.scss";
-import RoverDetails from "./Components/RoverDetails/RoverDetails";
+import { Link, Route, BrowserRouter as Router, Routes } from "react-router";
 import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
+import ProfilePage from "./pages/Profile/ProfilePage";
+import NavBar from "./Components/AddNavBar/NavBar";
+import RoverDetails from "./Components/RoverDetails/RoverDetails";
 
 function App() {
-  return <RoverDetails />;
+  return (
+    <div>
+      <Router>
+        <NavBar />
+        <Routes>
+          <Route path="/" element={ <> <PhotoOfTheDay /> <RoverDetails /> </> } />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route
+            path="*"
+            element={
+              <div>
+                Sorry, that page does not exist, try these:
+                <div>
+                  <Link to="/profile">Profile Page</Link>
+                </div>
+              </div>
+            }
+          />
+        </Routes>
+      </Router>
+    </div>
+  );
 }
 
 export default App;

src/App.tsx

@@ -0,0 +1,60 @@
+@import "../../Styles/GlobalStyles.scss";
+
+ body {
+    background-color: $blueBackground;
+    font-family: $PublicSans;
+ }
+
+.navBarContainer {
+    display: flex;
+    background: $blueBackground;
+    justify-content: space-between;
+
+}
+
+.homeButton  {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profilePageButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+}
+
+#astroButton {
+    width: 5vw;
+    min-width: 50px;
+
+}
+
+#earthButton {
+    width: 5vw;
+    min-width: 50px;
+    
+}
+
+a {
+    margin: 15px 10px 10px 10px;
+    color: $orangeBackground;
+    padding: 2.5px 20px;
+    border: solid 2px $orangeBackground;
+    text-decoration: none;
+    border-radius: 25px;
+}
+
+
+
+a:hover {
+    
+    color: $whiteFontColor;
+    box-shadow: 0px 0px 3px 3px $greyBackground;
+}
+
+a:active {
+     box-shadow: none;
+     color: $orangeBackground;
+}

src/Components/AddNavBar/Images/astronautcartoon.png

@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import NavBar from "./NavBar";
+import { BrowserRouter } from "react-router";
+
+describe(NavBar, () => {
+  it("Should change current location to profile when link is clicked", () => {
+    render(
+      <BrowserRouter>
+        <NavBar />
+      </BrowserRouter>,
+    );
+    const linkProfile = screen.getByText("Profile");
+    userEvent.click(linkProfile);
+  });
+});

src/Components/AddNavBar/Images/cartoon earth.png

@@ -0,0 +1,32 @@
+import React from "react";
+import "./NavBar.scss";
+import { Link } from "react-router";
+import imageAstro from "./Images/astronautcartoon.png";
+import imageEarth from "./Images/cartoon earth.png";
+
+export default function NavBar() {
+  return (
+    <div>
+      <header className="navBarHeader">
+        <nav className="navBarContainer">
+          <div>
+            <Link to="/" className="homeButton" id="homeLink">
+              <img src={imageEarth} alt="imageEarth" id="earthButton" />
+              Home
+            </Link>
+          </div>
+          <div>
+            <Link to="/profile" className="profilePageButton" id="profileLink">
+              <img
+                src={imageAstro}
+                alt="cartoon astronaut illustration"
+                id="astroButton"
+              />
+              Profile
+            </Link>
+          </div>
+        </nav>
+      </header>
+    </div>
+  );
+}

src/Components/AddNavBar/NavBar.scss

@@ -1,6 +1,7 @@
 @import "../../Styles/GlobalStyles.scss";
 
 #rover-information-container {
+margin-top: 60px;
 
   #rover-header { 
   color: whitesmoke;