Merge pull request #5 from columbiaspace/Matt-G

Added Procedures

package.json

@@ -43,6 +43,7 @@
     "@babel/plugin-transform-numeric-separator": "^7.23.4",
     "@babel/plugin-transform-optional-chaining": "^7.23.4",
     "@babel/plugin-transform-private-methods": "^7.23.3",
-    "@rollup/plugin-terser": "^0.4.4"
+    "@rollup/plugin-terser": "^0.4.4",
+    "raw-loader": "^4.0.2"
   }
 }

src/assets/sample.txt

@@ -0,0 +1 @@
+Hello World

src/components/ProcedureItem.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function ProcedureItem({name, description}) {
+    return (
+        <div className="ProcedureItem" >
+            <h1>{name}</h1>
+            <p>{description}</p>
+
+        </div>
+
+
+    );
+}
+
+export default ProcedureItem;

src/helpers/ProcedureList.js

@@ -0,0 +1,20 @@
+export const ProcedureList = [
+
+    {
+        name: "Procdure 1:",
+        description: "Blah Blah Blah",
+
+    },
+
+    {
+        name: "Procdure 2:",
+        description: "Blah Blah Blah",
+
+    },
+
+    {
+        name: "Procdure 3:",
+        description: "Blah Blah Blah",
+
+    },
+];

src/pages/rocks.js

@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
 import './../pages-style/rocks.css';
 
+import { ProcedureList } from '../helpers/ProcedureList';
+import ProcedureItem from '../components/ProcedureItem';
+function rocks() {
+
+
 function Rocks() {
   const [showWarning, setShowWarning] = useState(false);
 
@@ -16,6 +21,16 @@ function Rocks() {
     <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) =>{
+          <ProcedureItem
+          key = {key}
+          name = {Item.name}
+          description = {Item.description}
+          />
+        )
+      })}
+      </div>
       <button onClick={handleShowWarning}>Show Warning</button>
 
       {showWarning && (