Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from UofCBaja/header

Browse Source 
New Banner and Header
This commit is contained in:
darkicewolf50 2025-03-29 11:05:32 -06:00 committed by GitHub
commit d9e8d634fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 479 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/Header/Header.css
View File

@ -1,8 +1,13 @@
header {
display: flex;
flex-direction: column;
flex-direction: row;
margin: 1%;
margin-top: 0%;
margin-top: 1svh;
padding-right: 0.5svw;
align-items: center;
justify-content: space-between;
background-color: antiquewhite;
}
header a {
@ -11,18 +16,36 @@ header a {
cursor: pointer;
}
figure {
margin: 0px;
height: 10%;
header div button {
cursor: pointer;
height: 3rem;
width: 3rem;
justify-content: end;
background-color: inherit;
border: solid 2px gray;
border-radius: 1rem;
}
header figure {
cursor: pointer;
header div button img {
height: 2rem;
}
header div {
display: flex;
justify-content: flex-end;
align-items: center;
}
#logo {
height: 5rem;
background-color: white;
height: 10svh;
padding: 0.15rem;
}
/* naviagation section */
/* determines spacing and total amount of page it takes up*/
nav {
width: 50%;
}
nav a {
@ -34,7 +57,12 @@ nav a {
nav a li {
background-color: white;
padding: 0.5rem;
border: solid 1px gray;
/* border-left: solid 2px gray; */
}
/* removes first divider */
/* can be removed if no borders from above */
#FirstNav {
border-left: none;
}
nav a li:hover {
@ -44,10 +72,13 @@ nav a li:hover {
nav ul {
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
margin: 0px;
padding: 0px;
}
creates dwon downs
/* */
/* makes it so that the tags look the same whist having removing browser error */
.DropDownHeader {
display: inline-block;
@ -80,25 +111,56 @@ nav ul {
text-align: center;
}
header div {
/* For Banner */
#BannerHeader {
height: 100svh;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
header div button {
border: none;
cursor: pointer;
height: 4rem;
width: 4rem;
align-items: center;
background-color: inherit;
border: solid 2px gray;
border-radius: 1rem;
/* bebug border, use margin to advantage, may cause error later */
/* border-bottom: solid 1px black; */
}
header div button img {
width: 100%;
#BannerHeader img {
position: absolute;
height: 100svh;
width: inherit;
top: 0;
left: 0;
background-size: cover;
background-position: center;
z-index: -1;
}
/* used to postiion title and sub title */
#BannerHeader div {
margin-top: 15%;
}
#BannerHeader h1 {
display: flex;
width: fit-content;
margin-left: 3svw;
font-size: xx-large;
font-weight: normal;
background-color: white;
}
#BannerHeader h2 {
display: flex;
width: fit-content;
margin-left: 3svw;
font-size: xx-large;
font-weight: normal;
background-color: white;
}
/* for dark mode */

146
src/Header/Header.js
View File

@ -1,19 +1,31 @@
import logo from "./logo.webp";
import logo from "./logo.png";
import lightDark from "./light-dark.webp";
import { Outlet, Link } from "react-router-dom";
import "./Header.css";
import Ender from "../Footer/Ender";
import { useEffect, useState } from "react";
/**
* @param {null} null - Takes in nothing
* @param {null} nothing - Takes in nothing
* @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>
* @todo final css add baja but eon (baja leads chat)
* @todo add appropriate links
*/
const Header = () => {
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>
@ -27,7 +39,7 @@ const 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>
@ -41,46 +53,66 @@ const Header = () => {
}
});
/**
* @param {null} nothing - This takes in nothing
* @returns {null} nothing - This returns nothing
* @description This makes it so that the banner will always be 100% of the page at the top
* @author Brock <darkicewolf50@gmail.com>
*/
const HeaderBannerHeight = () => {
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;
// 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)`;
};
return (
<>
<header>
<div>
<Link to={"/"}>
<figure>
<img
id="logo"
src={logo}
alt="Schulich Off-Road's logo"
/>
<figcaption>
<h1>Schulich Offroad</h1>
</figcaption>
</figure>
</Link>
<button onClick={switchDarkMode}>
<img
id="darkModeToggle"
src={lightDark}
alt="Light/Dark Toggle Symbol"
/>
</button>
</div>
<Link to={"/"}>
<img
id="logo"
src={logo}
alt="Schulich Off-Road's logo"
/>
</Link>
<nav>
<ul>
<Link to={"/"}>
<li>About Us</li>
<li id="FirstNav">Home</li>
</Link>
<Link to={"/"}>
<li>About</li>
</Link>
<Link to={"/Teams"}>
<li>Teams</li>
<li>Team</li>
</Link>
<Link to={"/"}>
<li>History</li>
</Link>
<Link to={"/OurSponsors"}>
<li>Our Sponsors</li>
<li>Sponsors</li>
</Link>
<Link to={"/OurSponsors"}>
{/* <Link to={"/OurSponsors"}>
<li>Become a Sponsor</li>
</Link>
<li className="DropDown">
{/* this link and li only exits for styling purposes */}
</Link> */}
{/* Removed as no longer needed */}
{/* <li className="DropDown">
{/* this link and li only exits for styling purposes }
<Link className="DropDownHeader">
Club Membership & Upcoming Events
</Link>
@ -96,8 +128,8 @@ const Header = () => {
<li>Previous Events</li>
</Link>
</ul>
</li>
<li className="DropDown">
</li> */}
{/* <li className="DropDown">
<Link className="DropDownHeader">More...</Link>
<ul className="Hide">
<Link to={"/Gallery"}>
@ -107,14 +139,48 @@ const Header = () => {
<li>Roster</li>
</Link>
</ul>
</li>
</li> */}
<Link to={"/"}>
<li>Contact Us</li>
</Link>
</ul>
</nav>
<div>
<button onClick={switchDarkMode}>
<img
id="darkModeToggle"
src={lightDark}
alt="Light/Dark Toggle Symbol"
/>
</button>
</div>
</header>
<Outlet />
{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
<></>
) : (
<div id="BannerHeader">
<img
id="BannerBackgound"
src={bannerInfo.imgUrl}
alt={bannerInfo.imgAlt}
/>
<div>
<h1>{bannerInfo.titleText}</h1>
<h2>{bannerInfo.subtitleText}</h2>
</div>
</div>
)}
<Outlet context={{ bannerInfo, setBannerInfo }} />
<Ender />
</>
);
};
}
export default Header;
// used like this
// <UpdateBanner
// updatedTitleText="UCalgary Bajaa"
// updatedSubtitleText="HelloDAAAA"
// updatedImgUrl="https://picsum.photos/200"
// updatetdImgAlt="Lorem Picsum"
// />

48
src/Header/UpdateBanner.jsx Normal file
View File

@ -0,0 +1,48 @@
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
* @param {useOutletContext} dict - List of items to display as the banner, more detals in UpdateBanner.jsx
* @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 <></>;
}

BIN
src/Header/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 37 KiB

233
src/MockDB/MockPage.jsx Normal file
View File

@ -0,0 +1,233 @@
// import { useEffect } from "react";
// import { useOutletContext } from "react-router-dom";
import UpdateBanner from "../Header/UpdateBanner";
/**
* @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() {
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
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>
);
}

4
src/index.js
View File

@ -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>