From 0b825a0e56ffffd48cb966a08d84e6eeb254d4f7 Mon Sep 17 00:00:00 2001
From: MattKGatune <151987123+MattKGatune@users.noreply.github.com>
Date: Wed, 21 Feb 2024 20:24:34 -0500
Subject: [PATCH] Added Procedures

---
 package-lock.json               | 33 ++++++++++++++++++++++++++++++++-
 package.json                    |  3 ++-
 src/assets/sample.txt           |  1 +
 src/components/ProcedureItem.js | 15 +++++++++++++++
 src/helpers/ProcedureList.js    | 20 ++++++++++++++++++++
 src/pages/rocks.js              | 14 +++++++++++++-
 6 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/sample.txt
 create mode 100644 src/components/ProcedureItem.js
 create mode 100644 src/helpers/ProcedureList.js

diff --git a/package-lock.json b/package-lock.json
index 29093be..42c5977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,8 @@
         "@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"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -14720,6 +14721,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -28528,6 +28549,16 @@
         }
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
diff --git a/package.json b/package.json
index 8492803..c7a8309 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/assets/sample.txt b/src/assets/sample.txt
new file mode 100644
index 0000000..5e1c309
--- /dev/null
+++ b/src/assets/sample.txt
@@ -0,0 +1 @@
+Hello World
\ No newline at end of file
diff --git a/src/components/ProcedureItem.js b/src/components/ProcedureItem.js
new file mode 100644
index 0000000..dfb1fec
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/helpers/ProcedureList.js b/src/helpers/ProcedureList.js
new file mode 100644
index 0000000..e6690ae
--- /dev/null
+++ b/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",
+
+    },
+];
\ No newline at end of file
diff --git a/src/pages/rocks.js b/src/pages/rocks.js
index cd1f944..256bf93 100644
--- a/src/pages/rocks.js
+++ b/src/pages/rocks.js
@@ -1,11 +1,23 @@
 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>
     </div>
   );
 }