feat(newSite): coloring and placement redone again

2025-07-10 21:27:12 -06:00 · 2025-07-05 16:15:56 -06:00
parent c44dd960a1
commit 4907f39c1c
17 changed files with 512 additions and 584 deletions
--- a/src/OurSponsors/OurSponsors.jsx
+++ b/src/OurSponsors/OurSponsors.jsx
@ -0,0 +1,149 @@
+import "./OurSponsors.css";
+import { useEffect, useState } from "react";
+import currentSponsorData from "../MockDB/sponsorship.yml";
+import yaml from "js-yaml";
+import UpdateBanner from "../Header/UpdateBanner";
+
+/**
+ * @param {null} null - requires onthing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Our Sponsors Page
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo finish layout and add content
+ */
+const OurSponsors = () => {
+	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	// eslint-disable-next-line
+	// const LinktoSponsorOutreachForm =
+	// 	"https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
+
+	useEffect(() => {
+		getCurrentSponsors();
+	}, []);
+
+	/**
+	 * @param {null} null - requires nothing (link)
+	 * @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
+	 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
+	 * @author Brock <darkicewolf50@gmail.com>
+	 * @todo add gPRC to backend and front end add connect to synology drive
+	 */
+	const getCurrentSponsors = async () => {
+		try {
+			const res = await fetch(currentSponsorData);
+			const rawText = await res.text();
+			const yamlDict = await yaml.load(rawText);
+			setCurrentSponsorsDict(yamlDict);
+		} catch (error) {
+			//error checking
+			console.log(error);
+			console.error("Error recieving data from server:");
+		}
+	};
+
+	return (
+		<div id="OurSponsors">
+			<UpdateBanner
+				updatedTitleText="Sponsors"
+				updatedSubtitleText=""
+				updatedImgUrl="https://picsum.photos/200"
+			/>
+			<div id="SponsorsAbout">
+				<h2>Our partners are the foundation of our success.</h2>
+				<p>
+					By supporting us, you're helping shape the next generation of
+					engineers. Our club members develop real-world skills, problem-solving
+					abilities, and teamwork. And of course, with your help, we’re one step
+					closer to victory.
+				</p>
+				<ul>
+					<li>
+						<a href="">Learn More</a>
+					</li>
+					<li>
+						<a href="">Support Us</a>
+					</li>
+				</ul>
+			</div>
+			<div id="Sponsor">
+				{/* shows the current sponsors only after the data has been recieved */}
+				{currentSponsorsDict === undefined ? (
+					<p>Loading...</p>
+				) : (
+					<>
+						{/* gets the outmost name of the Object Name of tier*/}
+						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+							let changetoGridStyle =
+								sponsorsTier === "Diamond Tier" ||
+								sponsorsTier === "Platinum Tier";
+							let girdContainer = changetoGridStyle
+								? ""
+								: "sponsorGridContainer";
+							let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
+
+							return (
+								<div
+									key={sponsorsTier}
+									className="Sponsors">
+									<h3>{sponsorsTier}</h3>
+									<div className={girdContainer}>
+										{/* gets key form list of tier */}
+										{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+											(sponsorsKey) => {
+												return (
+													<div key={sponsorsKey}>
+														{/* gets name out of object and gets data of that sponsor preped */}
+														{Object.keys(
+															currentSponsorsDict[sponsorsTier][sponsorsKey]
+														).map((sponsorName) => {
+															let sponsorData =
+																currentSponsorsDict[sponsorsTier][sponsorsKey][
+																	sponsorName
+																];
+															let sponsorBronzeSilver =
+																sponsorsTier !== "Silver Tier" &&
+																sponsorsTier !== "Bronze Tier";
+															return (
+																<a
+																	key={sponsorData}
+																	href={sponsorData.Url}
+																	target="_blank"
+																	className={gridItem}
+																	rel="noreferrer">
+																	<div>
+																		<img
+																			src={sponsorData.LogoUrl}
+																			alt={sponsorName + "'s Logo"}
+																		/>
+																		{sponsorBronzeSilver === true ? (
+																			<div>
+																				<h3>{sponsorName}</h3>
+																				<p>
+																					{sponsorData.DescriptionAboutSponsor}
+																				</p>
+																			</div>
+																		) : (
+																			<div className="sponsorCenter">
+																				<h3>{sponsorName}</h3>
+																			</div>
+																		)}
+																	</div>
+																</a>
+															);
+														})}
+													</div>
+												);
+											}
+										)}
+									</div>
+								</div>
+							);
+						})}
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default OurSponsors;