Kenny

Open-Source/package.json

@@ -14,7 +14,8 @@
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "react-scroll": "^1.8.9"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

Open-Source/src/App.jsx

@@ -1,5 +1,6 @@
 import CampusMap from './Components/CampusMap'
 import Building from './Components/Building'
+import NavBar from './Components/NavBar';
 import './App.css'
 
 function App() {
@@ -8,10 +9,13 @@ function App() {
   return (
     <>
       <div className="App">
-        <h1> Interactive Map made with React and Leaflet</h1>
-        <CampusMap />
-        <Building buildingName="Library" numberOfFloors={[1, 2, 3, 4, 5, 6]} />
-
+          <NavBar />
+        <div id="campus-map">
+          <CampusMap />
+        </div>
+        <div id="building">
+          <Building buildingName="Library" numberOfFloors={[1, 2, 3, 4, 5, 6]} />
+        </div>
       </div>
     </>
   )

Open-Source/src/Components.css

@@ -70,11 +70,13 @@ img {
 }
 
 h3 {
+    color: black;
     padding-bottom: 0;
     margin-bottom: 0;
 }
 
 .floor-title {
+    color:black;
     padding-top: 0;
     margin-top: 0;
     margin-bottom: auto;
@@ -134,4 +136,33 @@ header {
 /*Center's the building image */
 .building {
     display: center;
-}
+}
+
+
+/* Nav Bar */
+
+.navbar {
+    display: flex;
+    justify-content: center;
+    background-color: #333;
+    padding: 10px 0;
+}
+
+.nav-item {
+    margin: 0 20px;
+}
+
+.nav-item a {
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.nav-item a:hover {
+    background-color: #555;
+}
+
+

Open-Source/src/Components/Building.jsx

@@ -1,4 +1,12 @@
 import Floor from './Floor'
+import { Element } from 'react-scroll';
+import PropTypes from 'prop-types';
+
+
+Building.propTypes = {
+    buildingName: PropTypes.string.isRequired,
+    numberOfFloors: PropTypes.arrayOf(PropTypes.number).isRequired
+};
 
 function Building({buildingName, numberOfFloors}){
     // numberOfFloors must be an array
@@ -36,18 +44,19 @@ function Building({buildingName, numberOfFloors}){
     })
 
     return (
-        <div className="building">
-            <header>
-                <h1 className="buildingName">QC's {buildingName} Bathroom Status</h1>
-                <a>Issue? Report here</a>
-            </header>
-            <div className="ListView">
-                {floors}
+        <Element name="buildingView">
+            <div className="building">
+                <header>
+                    <h1 className="buildingName">QC&apos;s {buildingName} Bathroom Status</h1>
+                    <a>Issue? Report here</a>
+                </header>
+                <div className="ListView">
+                    {floors}
+                </div>  
             </div>
-
-        </div>
+        </Element>
     )
 
 }
 
-export default Building
+export default Building;

Open-Source/src/Components/CampusMap.jsx

@@ -1,4 +1,4 @@
-
+import { Link } from 'react-scroll';
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
@@ -12,8 +12,15 @@ const CampusMap = () => {
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             />
             <Marker position={center}>
-                <Popup>
-                    A sample marker!
+                <Popup position={center}>
+                    Library
+                    <Link 
+                        className="libraryLink"
+                        to="buildingView" 
+                        smooth={true} 
+                        duration={500}>
+                            Library
+                    </Link>
                 </Popup>
             </Marker>
         </MapContainer>

Open-Source/src/Components/Floor.jsx

@@ -1,6 +1,12 @@
 import Button from './Button.jsx'
+import PropTypes from 'prop-types';
+
 // import { useState } from 'react'
 
+Floor.propTypes = {
+    floorNumber: PropTypes.number.isRequired,
+    hasBathrooms: PropTypes.bool.isRequired
+};
 
 function Floor({floorNumber, hasBathrooms}){
 
@@ -32,15 +38,16 @@ function Floor({floorNumber, hasBathrooms}){
 
         return (
             <div className="floor-container">
+
                 <h1 className='floor-title'>Floor {floorNumber} </h1>
                 <div className="floor">
                     <section>
-                        <h3>Women's</h3>
+                        <h3>Women&rsquo;s</h3>
                         <Button status={currentWStatus}></Button>
                         <Button status={currentWCleanliness}></Button>
                     </section>
                     <section>
-                        <h3>Men's:</h3>
+                        <h3>Men&rsquo;s:</h3>
                         <Button status={currentMStatus}></Button>
                         <Button status={currentMCleanliness}></Button>
                     </section>
@@ -57,7 +64,9 @@ function Floor({floorNumber, hasBathrooms}){
             </div>
         )
     }
+
 }
 
 
+
 export default Floor

Open-Source/src/Components/NavBar.jsx

@@ -0,0 +1,16 @@
+
+
+function NavBar() {
+    return (
+        <div className="navbar">
+            <div className="nav-item">
+                <a href="#campus-map">Campus Map</a>
+            </div>
+            <div className="nav-item">
+                <a href="#building">Building</a>
+            </div>
+        </div>
+    );
+}
+
+export default NavBar;