Merge pull request #7 from columbiaspace/Matt-G

Added Ingress Page

src/components/ProcedureItem.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
-function ProcedureItem({name, description}) {
+function ProcedureItem({name, description, className}) {
     return (
-        <div className="ProcedureItem" >
+        <div className={`ProcedureItem ${className}`}>
             <h1>{name}</h1>
             <p>{description}</p>
 

src/helpers/ProcedureList.js

@@ -1,19 +1,19 @@
 export const ProcedureList = [
 
     {
-        name: "Procdure 1:",
-        description: "Blah Blah Blah",
+        name: "Procedure 1:",
+        description: "Blah",
 
     },
 
     {
-        name: "Procdure 2:",
-        description: "Blah Blah Blah",
+        name: "Procedure 2:",
+        description: "Blah Blah",
 
     },
 
     {
-        name: "Procdure 3:",
+        name: "Procedure 3:",
         description: "Blah Blah Blah",
 
     },

src/pages-style/ingress.css

@@ -0,0 +1,32 @@
+.ingress-container {
+    display: flex;
+  }
+
+  .left-column {
+    flex: 3; /* Takes up 3/4 of the width */
+    padding: 20px; /* Optional: Add some padding for spacing */
+    background-color: #f0f0f0; /* Optional: Add a background color */
+  }
+
+  .ProcedureList {
+    flex: 1; /* Takes up 1/4 of the width */
+    padding: 20px; /* Optional: Add some padding for spacing */
+    background-color: #e0e0e0; /* Optional: Add a background color */
+  }
+  .ProcedureItem {
+    display: none; /* Initially hide all ProcedureItems */
+  }
+
+  .ProcedureItem.show {
+    display: block; /* Display the ProcedureItem with the "show" class */
+  }
+
+  .navigation-buttons {
+    margin-top: 10px; /* Optional: Add margin for spacing */
+  }
+
+  .navigation-buttons button {
+    margin-right: 10px; /* Optional: Add margin between buttons */
+    padding: 8px 12px; /* Optional: Add padding for button styling */
+    cursor: pointer;
+  }

src/pages/ingress.js

@@ -1,26 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './../pages-style/ingress.css';
 import { ProcedureList } from '../helpers/ProcedureList';
 import ProcedureItem from '../components/ProcedureItem';
 
-function ingress() {
+
+function Ingress() {
+  const [currentProcedure, setCurrentProcedure] = useState(0);
+
+  const handleNextProcedure = () => {
+    setCurrentProcedure((prevIndex) => (prevIndex + 1) % ProcedureList.length);
+  };
+
+  const handlePrevProcedure = () => {
+    setCurrentProcedure((prevIndex) => (prevIndex - 1 + ProcedureList.length) % ProcedureList.length);
+  };
+
   return (
-    <div>
-      <h1>Ingress</h1>
-      <p>This page will display ingress procedures</p>
-      <div className = "ProcedureList"> 
-      {ProcedureList.map((Item, key) =>{
-        return (
+    <div className="ingress-container">
+      <div className="left-column">
+        <h1>Ingress</h1>
+        <p>This page will display ingress procedures</p>
+      </div>
+      <div className="ProcedureList">
+        {ProcedureList.map((Item, index) => (
           <ProcedureItem
-          key = {key}
-          name = {Item.name}
-          description = {Item.description}
+            key={index}
+            name={Item.name}
+            description={Item.description}
+            className={index === currentProcedure ? 'show' : ''}
           />
-        )
-      })}
+        ))}
+        <div className="navigation-buttons">
+          <button onClick={handlePrevProcedure}>&lt; Previous</button>
+          <button onClick={handleNextProcedure}>Next &gt;</button>
+        </div>
       </div>
     </div>
   );
 }
 
-export default ingress;
+export default Ingress;

src/pages/rocks.js

@@ -1,11 +1,33 @@
 import React from 'react';
 import './../pages-style/rocks.css';
-
+import { ProcedureList } from '../helpers/ProcedureList';
+import ProcedureItem from '../components/ProcedureItem';
 
 
 function Rocks() {
   return (
     <div>
+      <h1>Rocks</h1>
+      <p>This page will display samples that have been collected, and what samples should be kept</p>
+      <div className="ProcedureList">
+        {ProcedureList.map((Item, key) => {
+          return (
+            <ProcedureItem
+              key={key}
+              name={Item.name}
+              description={Item.description}
+            />
+          );
+        })}
+      </div>
+      <button onClick={handleShowWarning}>Show Warning</button>
+
+      {showWarning && (
+        <div className="warning-modal">
+          <div className="warning-modal-content">
+            <span className="close" onClick={handleCloseWarning}>&times;</span>
+            <p>Warning: Are you sure you want to proceed?</p>
+            <button onClick={handleCloseWarning}>Yes, Proceed</button>
       <h1>Geological Sampling</h1>
         <div className="container">
           { /* Maps Column on the left half */ }
@@ -31,4 +53,4 @@ function Rocks() {
   );
 }
 
-export default Rocks;
+export default Rocks;