diff --git a/client/src/assets/about-us/Copy of UMSA_Guitar.png b/client/src/assets/about-us/Copy of UMSA_Guitar.png new file mode 100644 index 0000000..f4d8c2d Binary files /dev/null and b/client/src/assets/about-us/Copy of UMSA_Guitar.png differ diff --git a/client/src/assets/about-us/alex.jpeg b/client/src/assets/about-us/alex.jpeg new file mode 100644 index 0000000..f589d69 Binary files /dev/null and b/client/src/assets/about-us/alex.jpeg differ diff --git a/client/src/assets/about-us/alexBackground.jpeg b/client/src/assets/about-us/alexBackground.jpeg new file mode 100644 index 0000000..cf22144 Binary files /dev/null and b/client/src/assets/about-us/alexBackground.jpeg differ diff --git a/client/src/components/EventsElement.tsx b/client/src/components/EventsElement.tsx new file mode 100644 index 0000000..3ab9201 --- /dev/null +++ b/client/src/components/EventsElement.tsx @@ -0,0 +1,41 @@ +{/* types for events variables */} +type EventsElement = { + eventName: string; + eventImage: string; + eventLink: string; + eventDescription: string; + eventIsDone: boolean; + eventDate: Date; + eventTag: string; +}; + +{/* properties */} +type Props = { + element: EventsElement; +}; + +{/* eventsInfo function that define how each event element should look in the grid */} +export default function EventsInfo({ element }: Props) { + return( + <> + {/* opens link when clicked, and change visual depending on the true or false argument of element.eventIsDone */} + +

+ {element.eventName} +

+ + {element.eventName} +

+ {element.eventDescription} +

+ + + ) +} \ No newline at end of file diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx index 81986c2..1b36b22 100644 --- a/client/src/components/Navbar.tsx +++ b/client/src/components/Navbar.tsx @@ -13,6 +13,7 @@ export default function Navbar() {
home project team + events Sign Up Gallery
diff --git a/client/src/main.tsx b/client/src/main.tsx index e059144..87ebf0c 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -3,8 +3,11 @@ import * as ReactDOM from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import RootLayout from './layouts/RootLayout' import App from './App' -import ProjectTeam from './pages/Project-Team' import './index.css' + +{/* page imports */} +import ProjectTeam from './pages/Project-Team' +import Events from './pages/Events' import SignUp from './pages/SignUp' import Gallery from './pages/Gallery' @@ -13,6 +16,7 @@ import Pruna from "./pages/project-team/Pruna"; import Alanna from './pages/project-team/Alanna' import Tadiwa from './pages/project-team/Tadiwa' import Terrence from './pages/project-team/Terrence' +import Alex from './pages/project-team/Alex' {/* here's where we set up all our routing */} const router = createBrowserRouter([ @@ -20,15 +24,18 @@ const router = createBrowserRouter([ path: "/", element: , children: [ - {index: true, element: }, - {path: 'project-team', element: }, - {path: 'sign-up', element: }, - {path: 'gallery', element: }, + { index: true, element: }, + { path: 'events', element: }, + { path: 'project-team', element: }, + { path: 'sign-up', element: }, + { path: 'gallery', element: }, - {path: 'alanna', element: }, - {path: 'tadiwa', element: }, - {path: 'terrence', element: }, - {path: "pruna", element: }, + { path: 'alanna', element: }, + { path: 'tadiwa', element: }, + { path: 'terrence', element: }, + { path: "pruna", element: }, + { path: 'alex', element: } + ], }, ]); diff --git a/client/src/pages/Events.tsx b/client/src/pages/Events.tsx new file mode 100644 index 0000000..555a532 --- /dev/null +++ b/client/src/pages/Events.tsx @@ -0,0 +1,139 @@ +import { useEffect, useState } from "react"; +import EventsInfo from "../components/EventsElement"; +import EventImage from "../assets/about-us/Copy of UMSA_Guitar.png" + +{/* constant events array */} +const events = [ + { + eventName: "Jalinan Raya", + eventImage: EventImage, + eventLink: "https://www.instagram.com/p/DWPgAxmky6q/?img_index=1", + eventDescription: "very cool and very descriptive description", + eventIsDone: false, + eventDate: new Date("2026-05-20"), + eventTag: "Social", + }, + { + eventName: "Bersatu Trials", + eventImage: EventImage, + eventLink: "https://www.instagram.com/p/DV7o4eZmPHH/?img_index=1", + eventDescription: "even cooler and even more descriptive description", + eventIsDone: false, + eventDate: new Date("2026-05-28"), + eventTag: "Social", + }, + { + eventName: "Clash of UMSA", + eventImage: EventImage, + eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/", + eventDescription: "even even cooler and way wayyyyy more descriptive description", + eventIsDone: false, + eventDate: new Date("2026-06-21"), + eventTag: "Competition", + }, + { + eventName: "Clash of UMSA", + eventImage: EventImage, + eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/", + eventDescription: "even even cooler and way wayyyyy more descriptive description", + eventIsDone: false, + eventDate: new Date("2026-03-21"), + eventTag: "Social", + }, + { + eventName: "Clash of UMSA", + eventImage: EventImage, + eventLink: "https://www.instagram.com/p/DVrOmhNk_kI/", + eventDescription: "even even cooler and way wayyyyy more descriptive description", + eventIsDone: true, + eventDate: new Date("2026-04-20"), + eventTag: "Competition", + }, +]; + +{/* eventIsDone is overriden depending on if event.eventDate is before todays date */} +const today = new Date(); +const processedEvents = events.map((event) => ({ + ...event, eventIsDone: event.eventDate < today, +})) +.sort((a, b) => { //sorting the array based on how close the date is to origin(today) + if (a.eventIsDone == false && b.eventIsDone == false) { + return a.eventDate.getTime() - b.eventDate.getTime(); + } + else { + return b.eventDate.getTime() - a.eventDate.getTime(); + } +}); + +{/* use .filter() to make new array depending on events.eventIsDone is true or false */} +const upcomingEvents = processedEvents.filter((event) => event.eventIsDone == false); +const pastEvents = processedEvents.filter((event) => event.eventIsDone == true); + +export default function Events() { + + useEffect(() => { + document.title = "Events | UMSA"; + }, []); + + {/* state variable and setter function using useState with default value All, to rerender the activeTag based on onClick event from button */} + const [activeTag, setActiveTag] = useState("All"); + {/* when initial or new activeTag, EventsArrays are filtered for activeTag */} + const filteredUpcomingEvents = + activeTag == "All" ? upcomingEvents : upcomingEvents.filter((event) => event.eventTag == activeTag); + + const filteredPastEvents = + activeTag == "All" ? pastEvents : pastEvents.filter((event) => event.eventTag == activeTag); + + return( + <> +
+
+

+ Upcoming Events +

+
+
+ + + + +
+ {/* grid only containing upcoming events, using the upcomingEvents array */} +
+ {filteredUpcomingEvents.map((upcomingEvent) => ( + + ))} +
+
+

+ Past Events +

+
+ {/* grid only containing past events, using the pastEvents array */} +
+ {filteredPastEvents.map((pastEvent) => ( + + ))} +
+
+ + ) +} \ No newline at end of file diff --git a/client/src/pages/Project-Team.tsx b/client/src/pages/Project-Team.tsx index ade2b76..17a78dc 100644 --- a/client/src/pages/Project-Team.tsx +++ b/client/src/pages/Project-Team.tsx @@ -19,6 +19,8 @@ export default function ProjectTeam() {

{/* make a link to your page here! */} Alanna Santoso +

+ Alex Lee

Terrence Wu

diff --git a/client/src/pages/project-team/Alex.tsx b/client/src/pages/project-team/Alex.tsx new file mode 100644 index 0000000..a424de4 --- /dev/null +++ b/client/src/pages/project-team/Alex.tsx @@ -0,0 +1,86 @@ +import { FaInstagram, FaGithub, FaLinkedin, FaFilm, FaSpotify } from "react-icons/fa"; +import MemberStatsTable from "../../components/StatsTable"; +import bgImage from "../../assets/about-us/alexBackground.jpeg"; +import AlexImage from "../../assets/about-us/alex.jpeg"; +import { useEffect } from "react"; + +export default function Alex(){ + useEffect(() => { + document.title = "Alex(#1 Developer) | UMSA"; + }, []); + + return( + <> +
+ {/* bg image */} +
+ + {/* contents */} +
+ {/* header */} +
+

ALEXANDER THE GREAT

+
+ + {/* main */} +
+ {/* beautiful photo of me */} + + + {/* stats */} +
+ + +
+
+ + {/* about me */} + + + {/* social media section */} +
+

✨Socials✨

+
+ + {/* the tags are for creating links */} + + + + + + + + + + + + + + + +
+
+
+
+ + + + ) +}