diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c67a2eb..a151f23 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -55,9 +55,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", - "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", + "version": "7.25.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", + "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" diff --git a/frontend/public/data/events.ts b/frontend/public/data/events.ts new file mode 100644 index 0000000..d670d1d --- /dev/null +++ b/frontend/public/data/events.ts @@ -0,0 +1,88 @@ + +export type eventInfo = { + title: string; + startTime: string; + endTime: string; + location: string; + description: string; + image: string; + link: string; +}; + +export const events: eventInfo[] = [ + { + title: 'Rookie Code Rumble - Capture The Flag (CTF) Competition', + startTime: 'Wednesday, 19 June 2024 16:00:00', + endTime: '23:45 22 June 2024', + location: 'Columbo Theatre A, UNSW', + description: 'Want to learn how to hack the mainframe❓ Want to explore security❓ Join us for the Rookie Code Rumble Capture The Flag on June 19th‼️ 🚀\nWin prizes from a $450 Prize Pool🏆 Teams of up to 3 allowed. Beginners welcomed, no prior experience required and students who haven\'t done security courses are especially welcomed.', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/448249337_964318925477719_4689171588021736660_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=75d36f&_nc_ohc=ORdXB7beljwQ7kNvgGK3EgT&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AJPQZFI3KDjqlUXpEXj0g4n&oh=00_AYCqsRE9By_qBvBJ5bRLKnci9t6gSiHUGfmIkSQS4WG2LA&oe=67135575', + link: 'https://www.facebook.com/events/427443166914907', + }, + { + title: 'Open Dev Workshop 1', + startTime: 'Thursday, 13 June 2024 14:00:00', + endTime: 'Thursday, 13 June 2024 16:00:00', + location: 'Civil Engineering Building 102, UNSW', + description: 'Feeling the FOMO to start your own side projects😖?? But don\'t know where or how to start??🧐 We have the solution for you: Open Dev Workshop!! 💻\nOpen Dev Workshop is an introductory workshop focusing on HTML/CSS and Javascript. With no prior knowledge required, bring your laptop and an eagerness to learn.❤️‍🔥\nDon\'t miss out on this exciting opportunity and let\'s turn your ideas into reality, one line at a time!! 🔥', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/446935726_959621305947481_1708375961476055751_n.jpg?stp=dst-jpg_s960x960&_nc_cat=102&ccb=1-7&_nc_sid=75d36f&_nc_ohc=Y8wgeRzW8DkQ7kNvgEllCg0&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AemXrjsPaAsS0Jo7t3wNPst&oh=00_AYCFB70t_M0h8epdZ7UKq8LVWL4vqtGIkSC9kGUes1ssvQ&oe=671377D6', + link: 'https://www.facebook.com/events/1020624239688532', + }, + { + title: '2024 FMAA STEM Alternative Pathways Evening', + startTime: 'Wednesday, 9 Oct 2024 18:15:00', + endTime: 'Wednesday, 9 Oct 2024 20:30:00', + location: 'Roundhouse Room 3 & 4, UNSW', + description: 'Join us for an engaging panel discussion featuring representatives from Australia’s top firms across industries such as quantitative trading, management consulting, investment banking, asset management, and professional services. Gain valuable insights into how a STEM background can open doors to a variety of business and finance careers, and develop meaningful connections with industry professionals.', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/461261086_540208508398572_4261296480620587383_n.jpg?stp=dst-jpg_s960x960&_nc_cat=103&ccb=1-7&_nc_sid=75d36f&_nc_ohc=vf3IPe3_NPEQ7kNvgG_SxLX&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=ALtMsUxDU2QhcP8A5cS-tr7&oh=00_AYADt5ngFtSJsaT3YgKGjUHU8PHudDTb8eMHRu9JKuWuCw&oe=6713857F', + link: 'https://www.facebook.com/events/428430126479506', + }, + { + title: 'Cultural Sweet Treats', + startTime: 'Wednesday, 9 Oct 2024 13:00:00', + endTime: 'Wednesday, 9 Oct 2024 15:00:00', + location: 'UNSW Quadrangle', + description: 'Looking for a creative way to celebrate diversity?🤔🌟 Come along for an afternoon of fun where you’ll get to design and decorate your own gift box 🎁 filled with cultural sweets from around the world!🌏 Try new flavours and treats as you craft your masterpiece for a friend, family member or yourself 😋', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/461677000_1040949901147954_3024711492723797720_n.jpg?stp=dst-jpg_s960x960&_nc_cat=100&ccb=1-7&_nc_sid=75d36f&_nc_ohc=zY_RqNGeg50Q7kNvgH4izQ8&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AEzNe6W68jyyD37bJY9us2s&oh=00_AYAwuI1WXfZjhpeWSbHT1clhl05xVZdo0E-3nMCXo-Ndkw&oe=67139F71', + link: 'https://www.facebook.com/events/9261495757199727', + } +]; + +export const previousEvents: eventInfo[] = [ + { + title: 'COMP1521 Revision Session', + startTime: 'Wednesday, 31 July 2024 16:00:00', + endTime: 'Wednesday, 31 July 2024 18:00:00', + location: 'UNSW Colombo Theatre B', + description: 'PSST 🤫 Think a pipe is what Mario goes down? ⬇️ Still think threads are for clothes? 🪡 Whether you’re seven weeks behind (😣) on lectures 👩‍🏫, or super on top of it (🤯), get ready to BYTE 👾 into a world of MIPS and files and numbers 📣 at our COMP1521 Revision Session to learn and/or reinforce your knowledge from the beginning to the end 🏁💪🏻🧠 Make no MIPStake, with bits of free food for you to byte into 🤤 our 1521 Revision Session is just for you ‼️', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/452409402_989988656244079_1650487011875279290_n.jpg?stp=dst-jpg_s960x960&_nc_cat=111&ccb=1-7&_nc_sid=75d36f&_nc_ohc=ht74Cur7JP4Q7kNvgGspvAQ&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=APUh-KsjJ_dRpSnbr0TYkXd&oh=00_AYAu-LeWj1k53uhaQe6BMnCdQiDRUmguc0R4gt93VnxsRA&oe=6713A488', + link: 'https://www.facebook.com/events/1911189126010096', + }, + { + title: 'IMC Coding Competition', + startTime: 'Wednesday, 13 March 2024 15:00:00', + endTime: 'Wednesday, 13 March 2024 18:00:00', + location: 'Mathews Theatre B, UNSW', + description: 'Get those fingers 👐moving, as you’ll need to team up in groups of 3️⃣to be able to face 🗣️some of the problems thrown your way.To reward your diligence, you’ll be able to grab a free BYTE as finger food is provided 😈 Gaining coding experience and free food, what else could someone even ask for??? 😣', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/429779953_899425045300441_8341318489109234227_n.jpg?stp=dst-jpg_s960x960&_nc_cat=108&ccb=1-7&_nc_sid=75d36f&_nc_ohc=GY9LwEPT93gQ7kNvgHltEQe&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=APnYFltr29MYoFJQyVlY7HF&oh=00_AYBAaye3BXFt34mnbEi4ERpy1XmUYCTEbpzSqL1xa_xLsA&oe=6713AF65', + link: 'https://www.facebook.com/events/1106870833796065', + }, + { + title: 'Cultural BBQ', + startTime: 'Wednesday, 17 July 2024 12:00:00', + endTime: 'Wednesday, 17 July 2024 14:00:00', + location: 'Globe Lawn', + description: 'Tired of eating the same food every week? 😔 Looking to expand your horizons and try some cultural food? 🥘 BROKE AND NEED SOMETHING TO EAT ⁉️⁉️ Well CSESoc has you covered with an upgrade to our weekly bbq🍖🌟', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/450318124_983296013580010_564345365632281594_n.jpg?stp=dst-jpg_s960x960&_nc_cat=109&ccb=1-7&_nc_sid=75d36f&_nc_ohc=bpVcbawdlHUQ7kNvgFOoHVZ&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AHXSpjSIF8pprA1p1Ogqi34&oh=00_AYD1_PrwM7LTFVCvhXIQ3kubwhhYkBOmIO49Gpy4bvTdEg&oe=67139777', + link: 'https://www.facebook.com/events/871196261705246', + }, + { + title: 'CSESOC Boardgames Night', + startTime: 'Thursday, 7 March 2024 17:00:00', + endTime: 'Thursday, 7 March 2024 19:00:00', + location: 'Design Next Studio, Level 5, J17, UNSW', + description: 'The whirlwind of uni got u overwhelmed 😣? Come down to the Design Studio, and chill out with us 🧘‍♀️ as we play board games and indulge in free pizza 🍕!', + image: 'https://scontent.fsyd14-1.fna.fbcdn.net/v/t39.30808-6/429667295_896623802247232_669736057716718914_n.jpg?stp=dst-jpg_s960x960&_nc_cat=102&ccb=1-7&_nc_sid=75d36f&_nc_ohc=Ayn7Skl-pFAQ7kNvgES7wuB&_nc_zt=23&_nc_ht=scontent.fsyd14-1.fna&_nc_gid=AsnAjGmOe-G8q1L6qZb9G3U&oh=00_AYDpfvDY6DpKeydN99VCHujemmm0gZwL7_O1HjXHvwiPsw&oe=671383B1', + link: 'https://www.facebook.com/events/322704110303236', + }, +]; diff --git a/frontend/src/components/Event/EventsBrief.tsx b/frontend/src/components/Event/EventsBrief.tsx new file mode 100644 index 0000000..a225e04 --- /dev/null +++ b/frontend/src/components/Event/EventsBrief.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { events } from '../../../public/data/events'; +import EventsCarousel from './EventsCarousel'; + +const EventBrief = () => { + return ( +
+
+

UPCOMING EVENTS

+
+ {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

+
+ } +
+ + + +
+
+ ); +}; + +export default EventBrief; diff --git a/frontend/src/components/Event/EventsCarousel.tsx b/frontend/src/components/Event/EventsCarousel.tsx new file mode 100644 index 0000000..32a7268 --- /dev/null +++ b/frontend/src/components/Event/EventsCarousel.tsx @@ -0,0 +1,72 @@ +import { events } from '@/../public/data/events'; +import Carousel from 'react-multi-carousel'; +import 'react-multi-carousel/lib/styles.css'; + +export default function EventsCarousel() { + const responsive = { + superLargeDesktop: { + breakpoint: { max: 4000, min: 1024 }, + items: 3, + }, + desktop: { + breakpoint: { max: 1024, min: 768 }, + items: 3, + }, + tablet: { + breakpoint: { max: 768, min: 464 }, + items: 2, + }, + mobile: { + breakpoint: { max: 464, min: 0 }, + items: 1, + }, + }; + + return ( + + {events.map((event, index) => ( +
+ + {event.title} +
+
+

{event.title}

+

{event.location}

+

+ {formatEventDate(event.startTime, event.endTime)} +

+
+
+ +
+ ))} + + ); +} + +const formatEventDate = (startTime: string, endTime: string): string => { + const startDate = new Date(startTime); + const endDate = new Date(endTime); + + const sameDay = startDate.toDateString() === endDate.toDateString(); + + if (sameDay) { + return startDate.toLocaleDateString(); + } else { + return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`; + } +}; \ No newline at end of file diff --git a/frontend/src/components/Event/EventsGallery.tsx b/frontend/src/components/Event/EventsGallery.tsx new file mode 100644 index 0000000..83738be --- /dev/null +++ b/frontend/src/components/Event/EventsGallery.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { previousEvents } from '@/../public/data/events'; + +const EventGallery = () => { + return ( +
+ {previousEvents.map((event, index) => { + return ( +
+
+ + {event.title} +
+
+

{event.title}

+

{event.location}

+

+ {formatEventDate(event.startTime, event.endTime)} +

+
+
+ +
+
+ ); + })} +
+ ); +}; + +export default EventGallery; + +const formatEventDate = (startTime: string, endTime: string): string => { + const startDate = new Date(startTime); + const endDate = new Date(endTime); + + const sameDay = startDate.toDateString() === endDate.toDateString(); + + if (sameDay) { + return startDate.toLocaleDateString(); + } else { + return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`; + } +}; \ No newline at end of file diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index b6f8fa4..dce454e 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -1,23 +1,43 @@ +import React from 'react'; +import { events } from '../../../public/data/events'; +import EventsCarousel from './EventsCarousel'; +import EventGallery from './EventsGallery'; + const Event = () => { return (
-

UPCOMING EVENTS

+

EVENTS

-

- We run a wide-variety of events for fun, learning new skills and careers. For full - listings, check out the CSESoc Discord or our Facebook page! +

+ We run a wide-variety of events for fun, learning new skills and careers. For full + listings, check out our {' '} + Facebook page! +

+
+
+
+

+ Explore upcoming events

- - - +
+ {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

-
Placeholder
+ } +
+

+ Previous events +

+
); }; diff --git a/frontend/src/pages/events.tsx b/frontend/src/pages/events.tsx index 130a8f7..a1aadb5 100644 --- a/frontend/src/pages/events.tsx +++ b/frontend/src/pages/events.tsx @@ -1,21 +1,14 @@ -import Layout from '@/components/Layout'; -import PageTitle from '@/components/PageTitle'; -import axios from 'axios'; +import Navbar from '@/components/Navbar'; +import Footer from '@/components/Footer'; +// import axios from 'axios'; +import Events from '@/components/Event'; export default function EventsPage() { - const pingBackend = async () => { - axios - .get( - `http://${process.env.NEXT_PUBLIC_BACKEND_HOST}:${process.env.NEXT_PUBLIC_BACKEND_PORT}/ping` - ) - .then((resp) => console.log(resp.data)) - .catch((error) => console.log(error.message)); - }; - return ( - - - - +
+ + +
); -} +} \ No newline at end of file diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 8fe672b..821be72 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,14 +1,14 @@ import Landing from '@/components/Landing'; import Sponsors from '@/components/Sponsors/index'; -import Event from '@/components/Event'; import AboutHomePage from '@/components/About/AboutHomepage'; +import EventsBrief from '@/components/Event/EventsBrief'; export default function HomePage() { return (
- +
);