added teams: page content is ready for changes in Subteams.yml

src/MockDB/Leadership.yml

@@ -1,28 +0,0 @@
-Chassis:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Chassis Description (1 line)
-  longDescription: Chassis Description
-Drivetrain:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Drivetrain Description (1 line)
-  longDescription: Drivetrain Description
-Steering:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Steering Description (1 line)
-  longDescription: Steering Description
-Suspension:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Suspension Description (1 line)
-  longDescription: Suspension Description
-Electrical:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Electrical Description (1 line)
-  longDescription: Electrical Description
-Logistics:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Logistics Description (1 line)
-  longDescription: Logistics Description
-Software:
-  url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
-  shortDescription: Software Description (1 line)
-  longDescription: Software Description

src/MockDB/SubTeams.yml

@@ -0,0 +1,35 @@
+Chassis:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Chassis Description (1 line)
+  longDescription: Chassis Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Drivetrain:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Drivetrain Description (1 line)
+  longDescription: Drivetrain Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Steering:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Steering Description (1 line)
+  longDescription: Steering Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Suspension:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Suspension Description (1 line)
+  longDescription: Suspension Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Electrical:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Electrical Description (1 line)
+  longDescription: Electrical Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Logistics:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Logistics Description (1 line)
+  longDescription: Logistics Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+Software:
+  iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
+  shortDescription: Software Description (1 line)
+  longDescription: Software Description
+  subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg

src/Teams/SubTeams.js

@@ -1,7 +1,7 @@
 import "./SubTeams.css";
 import { useState, useEffect } from "react";
 import yaml from "js-yaml";
-import leadershipData from "../MockDB/Leadership.yml";
+import leadershipData from "../MockDB/SubTeams.yml";
 
 const SubTeams = () => {
 	const [subteamsDict, setSubteamsDict] = useState();
@@ -29,7 +29,6 @@ const SubTeams = () => {
 			console.error("Error recieving data from server:");
 		}
 	};
-	console.log(subteamsDict);
 
 	return (
 		<div id="Subteams">
@@ -45,49 +44,49 @@ const SubTeams = () => {
 								{/* row 1 */}
 								<td>
 									<img
-										src={subteamsArray[0].url}
+										src={subteamsArray[0].iconUrl}
 										alt={subteamsArray[0] + "'s Icon"}
 									/>
 								</td>
 								{/* row 2 */}
 								<td>
 									<img
-										src={subteamsArray[1].url}
+										src={subteamsArray[1].iconUrl}
 										alt={subteamsArray[1] + "'s Icon"}
 									/>
 								</td>
 								{/* row 3 */}
 								<td>
 									<img
-										src={subteamsArray[2].url}
+										src={subteamsArray[2].iconUrl}
 										alt={subteamsArray[2] + "'s Icon"}
 									/>
 								</td>
 								{/* row 4 */}
 								<td>
 									<img
-										src={subteamsArray[3].url}
+										src={subteamsArray[3].iconUrl}
 										alt={subteamsArray[3] + "'s Icon"}
 									/>
 								</td>
 								{/* row 5 */}
 								<td>
 									<img
-										src={subteamsArray[4].url}
+										src={subteamsArray[4].iconUrl}
 										alt={subteamsArray[4] + "'s Icon"}
 									/>
 								</td>
 								{/* row 6 */}
 								<td>
 									<img
-										src={subteamsArray[5].url}
+										src={subteamsArray[5].iconUrl}
 										alt={subteamsArray[5] + "'s Icon"}
 									/>
 								</td>
 								{/* row 7 */}
 								<td>
 									<img
-										src={subteamsArray[6].url}
+										src={subteamsArray[6].iconUrl}
 										alt={subteamsArray[6] + "'s Icon"}
 									/>
 								</td>
@@ -130,9 +129,50 @@ const SubTeams = () => {
 							const className = index % 2 === 0 ? "SubteamsEnd" : "";
 							return (
 								<div>
+									{index % 2 === 0 ? (
+										<>
+											<div>
+												<img
+													src={subteam.iconUrl}
+													alt={subteamName + "'s Icon"}
+													className={className}
+												/>
 												<h2 className={className}>{subteamName}</h2>
+											</div>
+											<div>
+												<img
+													src={subteam.subteamAtWork}
+													alt={
+														subteamName +
+														"'s members work or working on a project"
+													}
+												/>
 												<p>{subteam.longDescription}</p>
 											</div>
+										</>
+									) : (
+										<>
+											<div>
+												<h2 className={className}>{subteamName}</h2>
+												<img
+													src={subteam.iconUrl}
+													alt={subteamName + "'s Icon"}
+													className={className}
+												/>
+											</div>
+											<div>
+												<p>{subteam.longDescription}</p>
+												<img
+													src={subteam.subteamAtWork}
+													alt={
+														subteamName +
+														"'s members work or working on a project"
+													}
+												/>
+											</div>
+										</>
+									)}
+								</div>
 							);
 						})}
 					</div>