mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 13:54:17 -06:00
feat(header)^: added fade out on scroll down, TODO add updating banner from child component
This commit is contained in:
parent
595aecb12e
commit
ee6d1646b1
@ -116,6 +116,7 @@ creates dwon downs
|
||||
#BannerHeader {
|
||||
height: 100svh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
/* bebug border, use margin to advantage, may cause error later */
|
||||
/* border-bottom: solid 1px black; */
|
||||
@ -133,6 +134,11 @@ creates dwon downs
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* used to postiion title and sub title */
|
||||
#BannerHeader div {
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
#BannerHeader h1 {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
||||
@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp";
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
import "./Header.css";
|
||||
import Ender from "../Footer/Ender";
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
/**
|
||||
* @param {String} titleText - The text to dispaly in the
|
||||
@ -15,18 +15,20 @@ import { useEffect } from "react";
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo add appropriate links
|
||||
*/
|
||||
export default function Header({
|
||||
titleText = "UCalgary Baja",
|
||||
subtitleText = "Hello",
|
||||
imgUrl = "https://picsum.photos/200",
|
||||
imgAlt = "Lorem picsum",
|
||||
}) {
|
||||
export default function Header() {
|
||||
const [bannerInfo, setBannerInfo] = useState({
|
||||
titleText: "UCalgary Baja",
|
||||
subtitleText: "Hello",
|
||||
imgUrl: "https://picsum.photos/200",
|
||||
imgAlt: "Lorem picsum",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
HeaderBannerHeight();
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @param {null} nothing - Takes in nothing
|
||||
* @returns {CSSStyleRule} CSS - changes page to darkmode
|
||||
* @description inverts all of the colors of body without touching the pictures
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
@ -40,7 +42,7 @@ export default function Header({
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @param {null} nothing - Takes in nothing
|
||||
* @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances
|
||||
* @description checks for what the browser prefers
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
@ -54,6 +56,16 @@ 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
|
||||
@ -61,22 +73,52 @@ export default function Header({
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const HeaderBannerHeight = () => {
|
||||
if (titleText === "" && imgUrl === "") {
|
||||
if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") {
|
||||
// return early to avoid error when no banner is desired
|
||||
return;
|
||||
}
|
||||
const headerTop = document.getElementsByTagName("header")[0];
|
||||
const headerTopStyle = getComputedStyle(headerTop);
|
||||
const headerTopInnerHeight = headerTop.offsetHeight;
|
||||
const headerTopMarginTop = parseFloat(headerTopStyle.marginTop);
|
||||
// 2 is used to align bottom of div with img
|
||||
const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
|
||||
const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
|
||||
|
||||
const headerTopTotalHeight =
|
||||
headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
|
||||
|
||||
const HomeBannerTop = document.getElementById("BannerHeader");
|
||||
|
||||
// 1svh is to gget the div close enough to the image
|
||||
HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px - 1svh)`;
|
||||
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 (
|
||||
@ -154,21 +196,23 @@ export default function Header({
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{titleText === "" && imgUrl === "" ? (
|
||||
{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
|
||||
<></>
|
||||
) : (
|
||||
<div id="BannerHeader">
|
||||
<img
|
||||
id="temp"
|
||||
src={imgUrl}
|
||||
alt={imgAlt}
|
||||
id="BannerBackgound"
|
||||
src={bannerInfo.imgUrl}
|
||||
alt={bannerInfo.imgAlt}
|
||||
/>
|
||||
<h1>{titleText}</h1>
|
||||
<h2>{subtitleText}</h2>
|
||||
<div>
|
||||
<h1>{bannerInfo.titleText}</h1>
|
||||
<h2>{bannerInfo.subtitleText}</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Outlet />
|
||||
<Outlet context={{ updateBannerInfo }} />
|
||||
<Ender />
|
||||
</>
|
||||
);
|
||||
|
||||
247
src/MockDB/MockPage.jsx
Normal file
247
src/MockDB/MockPage.jsx
Normal file
@ -0,0 +1,247 @@
|
||||
import { useEffect } from "react";
|
||||
import { useOutletContext } from "react-router-dom";
|
||||
|
||||
/**
|
||||
* @param {String} imgAlt - This needs nothing
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description Dummy Page used for testing the header
|
||||
* @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>
|
||||
<p>
|
||||
Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a
|
||||
nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Integer euismod,
|
||||
arcu id aliquam lacinia, est diam dapibus lectus, non tempor ex mauris
|
||||
et metus. Proin quis sagittis turpis. Ut vel sapien porta, dictum quam
|
||||
ultrices, volutpat urna. Pellentesque nec ullamcorper est. Integer
|
||||
feugiat velit vel sem semper, quis imperdiet odio tristique. Nunc ac
|
||||
elit massa. Sed lobortis feugiat condimentum. Aliquam erat volutpat.
|
||||
Aenean luctus nulla vel velit aliquet hendrerit.
|
||||
</p>
|
||||
<p>
|
||||
Fusce mattis, nulla ut aliquam elementum, neque dui faucibus velit,
|
||||
vitae gravida nisl ante vitae neque. Nulla pulvinar ut ipsum ut porta.
|
||||
Vivamus porttitor elit id turpis pretium, convallis malesuada diam
|
||||
elementum. Suspendisse potenti. Aenean ac euismod urna, vel lobortis
|
||||
nisl. In laoreet metus a semper dignissim. Curabitur eget felis in
|
||||
libero facilisis auctor. Nulla vel viverra turpis, ac aliquet magna.
|
||||
Praesent ultricies turpis nec odio fermentum, sed venenatis enim
|
||||
sodales.
|
||||
</p>
|
||||
<p>
|
||||
Sed consectetur vitae nunc sit amet ullamcorper. Fusce id cursus elit,
|
||||
ac pulvinar massa. Orci varius natoque penatibus et magnis dis
|
||||
parturient montes, nascetur ridiculus mus. Morbi ultricies fermentum
|
||||
fringilla. Maecenas auctor commodo lobortis. Morbi sed ligula eget metus
|
||||
condimentum euismod. Nullam elementum ullamcorper neque, at volutpat
|
||||
eros suscipit sed. Sed metus dui, semper in scelerisque ut, vulputate
|
||||
sed nisi. Fusce rutrum, risus quis gravida aliquam, purus purus
|
||||
efficitur nunc, eu ullamcorper purus nisl id mi.
|
||||
</p>
|
||||
<p>
|
||||
Praesent suscipit orci a mollis finibus. Phasellus tempor elit sit amet
|
||||
diam finibus, id porttitor risus vestibulum. Etiam consequat odio sed mi
|
||||
malesuada tincidunt. Aliquam euismod ultrices velit, quis suscipit massa
|
||||
hendrerit et. Duis ornare maximus ex, eu consequat leo iaculis quis. Sed
|
||||
venenatis leo augue, et dictum mi laoreet sed. Quisque tempus laoreet
|
||||
accumsan.
|
||||
</p>
|
||||
<p>
|
||||
Aliquam in blandit nunc. Suspendisse massa lorem, congue ut dui at,
|
||||
aliquet rutrum lectus. Orci varius natoque penatibus et magnis dis
|
||||
parturient montes, nascetur ridiculus mus. Integer eget porta mauris.
|
||||
Maecenas erat erat, rutrum nec lacus sit amet, vestibulum finibus felis.
|
||||
Cras pretium viverra ultrices. Nam scelerisque vulputate massa, eget
|
||||
tristique dolor gravida eu. Maecenas libero nibh, molestie et diam
|
||||
vitae, rutrum luctus elit. Aenean mattis interdum pretium. Aliquam
|
||||
vestibulum nunc nisi, quis porttitor sem ornare tincidunt.
|
||||
</p>
|
||||
<p>
|
||||
Integer non lacus at purus vulputate semper et gravida libero. Etiam
|
||||
volutpat odio ac odio tincidunt lacinia. Aenean finibus mi nec dignissim
|
||||
dapibus. Sed non enim vitae leo aliquet fringilla eu sit amet risus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut nisi
|
||||
scelerisque mauris viverra malesuada id sed mauris. Nunc quis lobortis
|
||||
felis. Aliquam erat volutpat. Pellentesque fermentum at lorem quis
|
||||
vehicula. Donec blandit purus at pretium ullamcorper. Quisque sit amet
|
||||
enim sodales, pretium diam quis, elementum ex. Nulla eu faucibus dui, et
|
||||
rhoncus libero. Nulla facilisi.
|
||||
</p>
|
||||
<p>
|
||||
Curabitur gravida magna ac diam dapibus mattis. Aenean non erat non nisi
|
||||
porta hendrerit. Duis dictum lectus lorem, vel pellentesque risus
|
||||
interdum ac. Curabitur eu vehicula purus. Vivamus auctor ipsum
|
||||
convallis, vestibulum lectus sed, ullamcorper sem. Duis sit amet elit
|
||||
congue, maximus elit et, lacinia nisi. Aenean at ante dolor. Sed ipsum
|
||||
quam, venenatis id diam eu, hendrerit bibendum dui. Duis nisl felis,
|
||||
lobortis ultrices tellus sed, pharetra semper justo. Maecenas tempus
|
||||
tincidunt augue, sit amet hendrerit felis condimentum eu. Nunc dignissim
|
||||
aliquam metus, vel lobortis risus interdum nec. Orci varius natoque
|
||||
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In
|
||||
rhoncus sem quis magna gravida, posuere convallis nisl gravida. Praesent
|
||||
non sem et est porttitor dignissim.
|
||||
</p>
|
||||
<p>
|
||||
Nam feugiat aliquet facilisis. Praesent hendrerit vulputate justo, eget
|
||||
consectetur nibh elementum a. In lobortis lobortis ex, vitae dictum
|
||||
dolor interdum ut. Vestibulum sed ipsum ac nunc imperdiet interdum et
|
||||
nec sapien. Duis nec gravida orci. Curabitur quis tincidunt nulla.
|
||||
Mauris efficitur nulla id eros feugiat, vitae convallis est dapibus.
|
||||
Maecenas elementum quam sed mattis aliquam. Curabitur ipsum felis,
|
||||
dictum in velit quis, pretium vestibulum augue. Ut eu finibus felis.
|
||||
Integer nec enim nec sapien vulputate pharetra.
|
||||
</p>
|
||||
<p>
|
||||
Quisque at dapibus lacus. Nam et metus leo. Vivamus condimentum
|
||||
pellentesque mauris, nec blandit neque. Duis eu risus erat. Cras velit
|
||||
turpis, aliquet sed nibh at, sagittis venenatis nisl. Aenean erat eros,
|
||||
lobortis a nisl a, auctor pellentesque eros. Proin nec auctor nunc.
|
||||
Integer tristique metus et elit blandit, id suscipit nulla ornare. Donec
|
||||
ac sem purus. Sed mollis arcu sem, quis condimentum lacus lobortis id.
|
||||
Proin tincidunt nibh a varius ultricies. In finibus libero quis enim
|
||||
ultrices tincidunt. Nam leo arcu, facilisis eget blandit sed,
|
||||
consectetur ac arcu. Vestibulum ac eros erat. Nullam eget aliquam est,
|
||||
eget commodo libero.
|
||||
</p>
|
||||
<p>
|
||||
Nulla et urna ligula. Nullam suscipit ultrices dolor, non feugiat est
|
||||
eleifend in. Sed feugiat quis nisi iaculis viverra. Aliquam egestas
|
||||
risus sit amet tortor lobortis, quis efficitur ante hendrerit. Donec
|
||||
sagittis orci turpis, in commodo nunc vehicula eu. Quisque quis quam in
|
||||
ligula tincidunt suscipit a at lacus. Etiam eu lectus volutpat, bibendum
|
||||
ante et, ullamcorper ipsum. Maecenas porttitor accumsan odio eu
|
||||
tincidunt. Aliquam erat volutpat. Mauris sit amet odio sed tortor
|
||||
ultricies congue a eget sem. Vestibulum molestie gravida velit, at
|
||||
auctor sem commodo a.
|
||||
</p>
|
||||
<p>
|
||||
Aliquam fermentum leo at ornare auctor. Vivamus ac faucibus tortor.
|
||||
Nullam pulvinar velit maximus, ornare mauris vitae, hendrerit ante.
|
||||
Praesent et semper metus. Ut faucibus aliquam justo non placerat. Sed
|
||||
quis scelerisque tellus. In vel hendrerit velit. Fusce et urna
|
||||
ultricies, bibendum ligula ac, volutpat erat. Sed quis luctus dolor,
|
||||
vitae iaculis mi. Pellentesque in tellus eu quam consequat venenatis.
|
||||
Etiam a tempus nibh. Fusce eu mi sodales dui finibus tempor blandit
|
||||
pretium metus. Curabitur elit magna, vulputate quis posuere vehicula,
|
||||
faucibus eu ex.
|
||||
</p>
|
||||
<p>
|
||||
Phasellus quis quam nec neque laoreet luctus id vel tortor. Integer
|
||||
dictum euismod quam non eleifend. Vestibulum sit amet velit vel dui
|
||||
eleifend euismod. In hac habitasse platea dictumst. Cras congue nulla et
|
||||
velit tincidunt vestibulum. Maecenas ac imperdiet augue. Donec venenatis
|
||||
enim risus, et rhoncus mauris efficitur vitae. Phasellus vitae leo
|
||||
semper nunc volutpat suscipit non sit amet nulla. Nullam pharetra neque
|
||||
turpis, id facilisis sapien ultricies vitae. Ut ac elit at arcu laoreet
|
||||
fringilla ut tincidunt urna. Proin nibh lacus, porttitor eget nisi
|
||||
congue, rhoncus rhoncus eros. Nunc finibus neque nec erat fringilla
|
||||
eleifend.
|
||||
</p>
|
||||
<p>
|
||||
Cras congue purus in magna posuere, vel varius leo facilisis. Donec a ex
|
||||
volutpat, accumsan odio id, gravida lorem. Vestibulum mauris libero,
|
||||
venenatis nec velit non, consectetur pretium nulla. Vestibulum ante
|
||||
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
|
||||
Fusce felis velit, bibendum quis pretium quis, sollicitudin nec magna.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae magna
|
||||
ligula. Donec viverra aliquam lectus, vel mollis metus egestas sit amet.
|
||||
Nam elit velit, convallis et turpis quis, tincidunt euismod elit.
|
||||
Quisque pretium ultrices leo id convallis. Nulla sed dui at nisl
|
||||
imperdiet rhoncus ut sit amet ante. Fusce nisl enim, ornare non tortor
|
||||
eu, interdum gravida lacus.
|
||||
</p>
|
||||
<p>
|
||||
Donec eu aliquam nunc, eget facilisis risus. Maecenas at vehicula odio.
|
||||
Donec pulvinar at nisl in sollicitudin. Donec tincidunt lacus at nisl
|
||||
consequat tempus. Praesent sit amet accumsan dolor, a tristique erat.
|
||||
Fusce at molestie diam. Donec quis nulla urna. Aenean laoreet dolor et
|
||||
neque rhoncus blandit. Duis id mi id mauris rutrum facilisis.
|
||||
Suspendisse potenti. Aliquam sodales quam nec euismod ornare. Nullam
|
||||
laoreet ultricies pretium. Pellentesque eu turpis sagittis, dictum nunc
|
||||
sit amet, dapibus mauris. Quisque congue sit amet libero a rhoncus.
|
||||
</p>
|
||||
<p>
|
||||
Cras non ultricies arcu. Sed dapibus eros ut dapibus elementum.
|
||||
Suspendisse lectus lorem, vestibulum sit amet tincidunt a, mattis a
|
||||
eros. Mauris ut urna sed turpis fermentum maximus non at justo. Ut ut
|
||||
dictum tortor. In egestas sem eget dui efficitur pretium. Mauris vitae
|
||||
massa eu tortor semper finibus.
|
||||
</p>
|
||||
<p>
|
||||
Sed tincidunt, velit ac dictum dictum, dui odio elementum mauris, quis
|
||||
tristique lacus nisl congue nulla. Nunc volutpat nisi ut tortor
|
||||
ultrices, non lobortis lacus gravida. Aliquam tempus dolor at felis
|
||||
dictum, a molestie lacus sagittis. Duis nibh sem, tincidunt eget feugiat
|
||||
in, dapibus ut lacus. Aliquam sed tellus nec lacus ultricies placerat in
|
||||
ut lectus. Sed nec convallis ante. Ut ut lobortis sem. Aliquam ornare
|
||||
rhoncus lacus in dapibus. Donec vel diam ante. Maecenas egestas
|
||||
scelerisque nisl ac scelerisque. Cras sapien nulla, porttitor a varius
|
||||
at, elementum ac metus. Vivamus at ligula urna.
|
||||
</p>
|
||||
<p>
|
||||
Curabitur a semper quam. Sed a fermentum velit. Aenean magna mi,
|
||||
pellentesque et fermentum vitae, pharetra dapibus libero. Vivamus
|
||||
porttitor ultrices dignissim. Donec sodales, purus sed sagittis
|
||||
facilisis, purus ex suscipit libero, eu consectetur dui velit ultrices
|
||||
erat. Etiam eu pellentesque est. Pellentesque vehicula dui ac mauris
|
||||
egestas pharetra. Maecenas eget tristique sem. Nullam tincidunt lectus
|
||||
sit amet odio ornare, vitae pretium nisi feugiat.
|
||||
</p>
|
||||
<p>
|
||||
Pellentesque fringilla ante et metus sollicitudin, vel blandit nisi
|
||||
sagittis. In semper nisi nec sapien congue eleifend. Nam faucibus elit
|
||||
leo, quis dignissim ex sagittis nec. Aliquam in magna commodo massa
|
||||
sollicitudin ornare quis nec purus. Maecenas placerat quis lacus non
|
||||
luctus. Vestibulum ut tellus luctus, congue turpis sed, elementum dolor.
|
||||
Nam nec nunc congue magna ornare congue. Aliquam dignissim finibus dui
|
||||
eu semper. Sed viverra massa sed ipsum dictum, at blandit lorem aliquet.
|
||||
Proin semper, tortor a malesuada finibus, tellus lacus porttitor magna,
|
||||
eu porttitor erat turpis a quam. Nam blandit nisi vitae justo tincidunt,
|
||||
sit amet suscipit tortor ultrices.
|
||||
</p>
|
||||
<p>
|
||||
Nulla facilisi. Etiam eleifend varius nisl a mollis. In non laoreet
|
||||
tellus, sed laoreet purus. Etiam sed erat vitae dui auctor fringilla.
|
||||
Phasellus pretium purus a urna scelerisque dapibus. Phasellus eget enim
|
||||
enim. Fusce ac fringilla nunc. Aliquam tristique mattis diam in
|
||||
placerat. Vestibulum dolor velit, sagittis et dolor non, tempus
|
||||
consectetur justo.
|
||||
</p>
|
||||
<p>
|
||||
Vivamus consequat sapien enim, ac vulputate mi viverra sed. Donec in
|
||||
nunc ac risus tempor mollis. Cras turpis sem, lacinia at turpis sed,
|
||||
malesuada auctor mi. Etiam sed elementum erat, non tincidunt urna.
|
||||
Curabitur congue dolor nisi, at facilisis orci facilisis nec. Etiam
|
||||
cursus, tellus vel varius fermentum, velit ex blandit mauris, id
|
||||
vulputate augue eros at orci. Nullam eu eleifend ipsum. Etiam sed velit
|
||||
lorem. Duis turpis nulla, rhoncus sit amet arcu egestas, facilisis
|
||||
imperdiet dui. Suspendisse facilisis lobortis elit, ut facilisis eros
|
||||
laoreet non. Vestibulum at leo at nunc euismod condimentum.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -10,6 +10,7 @@ import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinThe
|
||||
import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
|
||||
import Gallery from "./Gallery/Gallery";
|
||||
import "./index.css";
|
||||
import MockPage from "./MockDB/MockPage";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
@ -35,6 +36,9 @@ root.render(
|
||||
<Route
|
||||
path="/Gallery"
|
||||
element={<Gallery />}></Route>
|
||||
<Route
|
||||
path="/MockPage"
|
||||
element={<MockPage />}></Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user