From cffb9f46e6b89e3366f9b61be5dab2e3d8211b69 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 22 Mar 2025 21:02:20 -0600 Subject: [PATCH] feat(header): Banner/Hero Section can now be updated by child components --- src/Header/Header.js | 77 ++++--------------------------------- src/Header/UpdateBanner.jsx | 47 ++++++++++++++++++++++ src/MockDB/MockPage.jsx | 32 +++++---------- 3 files changed, 64 insertions(+), 92 deletions(-) create mode 100644 src/Header/UpdateBanner.jsx diff --git a/src/Header/Header.js b/src/Header/Header.js index b8f0bd4..92e05fe 100644 --- a/src/Header/Header.js +++ b/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 {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 + * @param {useOutletContext} dict - List of items to display as the banner, more detals in UpdateBanner.jsx * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description The top header part of the page includes the naviagtion * @author Brock @@ -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 - */ - 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 - */ - 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 ( <>
@@ -212,36 +171,16 @@ export default function Header() { )} - + ); } // used like this -// import { useState, useEffect } from 'react'; - -// const ChildPage = () => { -// // You can modify the banner's content dynamically here -// const [bannerInfo, setBannerInfo] = useState({ -// 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 ( -//
-//

Child Page Content

-// {/* Other child content goes here */} -//
-// ); -// }; - -// export default ChildPage; +// diff --git a/src/Header/UpdateBanner.jsx b/src/Header/UpdateBanner.jsx new file mode 100644 index 0000000..0187395 --- /dev/null +++ b/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 ( + <> + + // --snip-- + ``` + * @author Brock + */ +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 <>; +} diff --git a/src/MockDB/MockPage.jsx b/src/MockDB/MockPage.jsx index 777d15f..3cff33a 100644 --- a/src/MockDB/MockPage.jsx +++ b/src/MockDB/MockPage.jsx @@ -1,5 +1,6 @@ -import { useEffect } from "react"; -import { useOutletContext } from "react-router-dom"; +// import { useEffect } from "react"; +// 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 */ 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 (
+

Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora