feat(header): Banner/Hero Section can now be updated by child components

src/Header/Header.js

@@ -6,10 +6,7 @@ import Ender from "../Footer/Ender";
 import { useEffect, useState } from "react";
 
 /**
- * @param {String} titleText - The text to dispaly in the
+ * @param {useOutletContext} dict - List of items to display as the banner, more detals in UpdateBanner.jsx
- * @param {String} subtitleText - The text below the banner text you want
- * @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
- * @param {String} imgAlt - The alt text for the image banner, this is required for good search results
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description The top header part of the page includes the naviagtion
  * @author Brock <darkicewolf50@gmail.com>
@@ -56,16 +53,6 @@ export default function Header() {
 		}
 	});
 
-	/**
-	 * @param {null} nothing - This takes in nothing
-	 * @returns {null} nothing - This returns nothing
-	 * @description This makes it so that the banner fades on scroll down
-	 * @author Brock <darkicewolf50@gmail.com>
-	 */
-	document.addEventListener("scroll", () => {
-		ScrollFadeOut();
-	});
-
 	/**
 	 * @param {null} nothing - This takes in nothing
 	 * @returns {null} nothing - This returns nothing
@@ -93,34 +80,6 @@ export default function Header() {
 		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
 	};
 
-	/**
-	 * @param {null} nothing - This takes in nothing
-	 * @returns {null} nothing - This returns nothing
-	 * @description This makes it os that the banner fades out on scolling downward
-	 * @author Brock <darkicewolf50@gmail.com>
-	 */
-	const ScrollFadeOut = () => {
-		const bannerImg = document.getElementById("BannerBackgound");
-
-		let opacity = 1;
-
-		let distanceToTop = window.scrollY + bannerImg.getBoundingClientRect().top;
-		let bannerImgHeight = bannerImg.offsetHeight;
-		let scrollTop = document.documentElement.scrollTop;
-
-		if (scrollTop > distanceToTop) {
-			opacity = 1 - (scrollTop - distanceToTop) / bannerImgHeight;
-		}
-
-		if (opacity >= 0) {
-			bannerImg.style.opacity = opacity;
-		}
-	};
-
-	const updateBannerInfo = (newBannerInfo) => {
-		setBannerInfo({ ...newBannerInfo });
-	};
-
 	return (
 		<>
 			<header>
@@ -212,36 +171,16 @@ export default function Header() {
 				</div>
 			)}
 
-			<Outlet context={{ updateBannerInfo }} />
+			<Outlet context={{ bannerInfo, setBannerInfo }} />
 			<Ender />
 		</>
 	);
 }
 
 // used like this
-// import { useState, useEffect } from 'react';
+// <UpdateBanner
-
+// 	updatedTitleText="UCalgary Bajaa"
-// const ChildPage = () => {
+// 	updatedSubtitleText="HelloDAAAA"
-//   // You can modify the banner's content dynamically here
+// 	updatedImgUrl="https://picsum.photos/200"
-//   const [bannerInfo, setBannerInfo] = useState({
+// 	updatetdImgAlt="Lorem Picsum"
-//     imgUrl: 'default-image-url.jpg',
+// />
-//     text: 'Default Banner Text',
-//   });
-
-//   useEffect(() => {
-//     // Here, you could fetch data or dynamically set the image/text
-//     setBannerInfo({
-//       imgUrl: 'new-banner-image.jpg',
-//       text: 'New Banner Text for this Page',
-//     });
-//   }, []); // This will set it when the component mounts
-
-//   return (
-//     <div>
-//       <h2>Child Page Content</h2>
-//       {/* Other child content goes here */}
-//     </div>
-//   );
-// };
-
-// export default ChildPage;

src/Header/UpdateBanner.jsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { useOutletContext } from "react-router-dom";
+
+/**
+ * @param {String} titleText - The text to dispaly in the banner as a title
+ * @param {String} subtitleText - The text below the banner text you want
+ * @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
+ * @param {String} imgAlt - The alt text for the image banner, this is required for good search results
+ * @description The way to update the banner from the child
+ * @example ```js
+    RouteComponent {
+        return (
+		    <>
+			    <UpdateBanner
+                    updatedTitleText="UCalgary Bajaa"
+                    updatedSubtitleText="HelloDAAAA"
+                    updatedImgUrl="https://picsum.photos/200"
+                    updatetdImgAlt="Lorem Picsum"
+			    />
+    // --snip--
+    ```
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function UpdateBanner({
+	updatedTitleText = "UCalgary Baja",
+	updatedSubtitleText = "Hello",
+	updatedImgUrl = "https://picsum.photos/200",
+	updatedImgAlt = "Lorem picsum",
+}) {
+	const context = useOutletContext();
+	const updateBanner = context.setBannerInfo;
+	useEffect(() => {
+		updateBanner({
+			titleText: updatedTitleText,
+			subtitleText: updatedSubtitleText,
+			imgUrl: updatedImgUrl,
+			imgAlt: updatedImgAlt,
+		});
+	}, [
+		updatedTitleText,
+		updatedSubtitleText,
+		updatedImgUrl,
+		updatedImgAlt,
+		updateBanner,
+	]);
+	return <></>;
+}

src/MockDB/MockPage.jsx

@@ -1,5 +1,6 @@
-import { useEffect } from "react";
+// import { useEffect } from "react";
-import { useOutletContext } from "react-router-dom";
+// import { useOutletContext } from "react-router-dom";
+import UpdateBanner from "../Header/UpdateBanner";
 
 /**
  * @param {String} imgAlt - This needs nothing
@@ -8,29 +9,14 @@ import { useOutletContext } from "react-router-dom";
  * @author Brock <darkicewolf50@gmail.com>
  */
 export default function MockPage() {
-	const { updateBannerInfo } = useOutletContext();
-
-	var updated = 0;
-
-	const BannerSet = () => {
-		if (updated === 0) {
-			updateBannerInfo({
-				titleText: "UCalgary Baja",
-				subtitleText: "HelloWorld DD",
-				imgUrl: "https://picsum.photos/200",
-				imgAlt: "Lorem S",
-			});
-
-			updated = 1;
-		}
-	};
-
-	useEffect(() => {
-		// Here, you could fetch data or dynamically set the image/text
-		BannerSet();
-	}, []); // This will set it when the component mounts
 	return (
 		<div>
+			<UpdateBanner
+				updatedTitleText="UCalgary Bajaa"
+				updatedSubtitleText="HelloDAAAAAE"
+				updatedImgUrl="https://picsum.photos/200"
+				updatetdImgAlt="Lorem Picsum"
+			/>
 			<p>
 				Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a
 				nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora