Skip to content

Commit b0d426d

Browse files
author
Ming Xuan Yong
committed
Created two carousels for past events and current events with an overlay for location and start dates
1 parent b157bcb commit b0d426d

File tree

3 files changed

+168
-7
lines changed

3 files changed

+168
-7
lines changed

‎frontend/public/data/data.ts

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export const events: eventInfo[] = [
169169
endTime: '23:45 22 June 2024',
170170
location: 'Columbo Theatre A, UNSW',
171171
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.',
172-
image: 'https://scontent.fsyd10-1.fna.fbcdn.net/v/t39.30808-6/448249337_964318925477719_4689171588021736660_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=5f2048&_nc_ohc=f7DlIly-QDgQ7kNvgHT9Fw9&_nc_ht=scontent.fsyd10-1.fna&oh=00_AYDFXHym0otALqZ18_Rxfvm2eLtQ4E8MgmojLxFhsG_H4w&oe=6670BC75',
172+
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',
173173
link: 'https://www.facebook.com/events/427443166914907',
174174
},
175175
{
@@ -178,7 +178,64 @@ export const events: eventInfo[] = [
178178
endTime: 'Thursday, 13 June 2024 16:00:00',
179179
location: 'Civil Engineering Building 102, UNSW',
180180
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!! 🔥',
181-
image: 'https://scontent.fsyd10-2.fna.fbcdn.net/v/t39.30808-6/446935726_959621305947481_1708375961476055751_n.jpg?stp=dst-jpg_s960x960&_nc_cat=102&ccb=1-7&_nc_sid=5f2048&_nc_ohc=Eb--uYtnevgQ7kNvgEtNpvA&_nc_ht=scontent.fsyd10-2.fna&oh=00_AYA3B55iger5ZGu1aa1gvZHfLKrfk7YZ2g7QxaqSZf9q2A&oe=6670DED6',
181+
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',
182182
link: 'https://www.facebook.com/events/1020624239688532',
183+
},
184+
{
185+
title: '2024 FMAA STEM Alternative Pathways Evening',
186+
startTime: 'Wednesday, 9 Oct 2024 18:15:00',
187+
endTime: 'Wednesday, 9 Oct 2024 20:30:00',
188+
location: 'Roundhouse Room 3 & 4, UNSW',
189+
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.',
190+
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',
191+
link: 'https://www.facebook.com/events/428430126479506',
192+
},
193+
{
194+
title: 'Cultural Sweet Treats',
195+
startTime: 'Wednesday, 9 Oct 2024 13:00:00',
196+
endTime: 'Wednesday, 9 Oct 2024 15:00:00',
197+
location: 'UNSW Quadrangle',
198+
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 😋',
199+
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',
200+
link: 'https://www.facebook.com/events/9261495757199727',
201+
}
202+
];
203+
204+
export const previousEvents: eventInfo[] = [
205+
{
206+
title: 'COMP1521 Revision Session',
207+
startTime: 'Wednesday, 31 July 2024 16:00:00',
208+
endTime: 'Wednesday, 31 July 2024 18:00:00',
209+
location: 'UNSW Colombo Theatre B',
210+
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 ‼️',
211+
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',
212+
link: 'https://www.facebook.com/events/1911189126010096',
213+
},
214+
{
215+
title: 'IMC Coding Competition',
216+
startTime: 'Wednesday, 13 March 2024 15:00:00',
217+
endTime: 'Wednesday, 13 March 2024 18:00:00',
218+
location: 'Mathews Theatre B, UNSW',
219+
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??? 😣',
220+
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',
221+
link: 'https://www.facebook.com/events/1106870833796065',
222+
},
223+
{
224+
title: 'Cultural BBQ',
225+
startTime: 'Wednesday, 17 July 2024 12:00:00',
226+
endTime: 'Wednesday, 17 July 2024 14:00:00',
227+
location: 'Globe Lawn',
228+
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🍖🌟',
229+
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',
230+
link: 'https://www.facebook.com/events/871196261705246',
231+
},
232+
{
233+
title: 'CSESOC Boardgames Night',
234+
startTime: 'Thursday, 7 March 2024 17:00:00',
235+
endTime: 'Thursday, 7 March 2024 19:00:00',
236+
location: 'Design Next Studio, Level 5, J17, UNSW',
237+
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 🍕!',
238+
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',
239+
link: 'https://www.facebook.com/events/322704110303236',
183240
}
184241
];

‎frontend/src/components/Event/carousel.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { useState } from 'react';
2+
import { eventInfo } from '../../../public/data/data';
3+
4+
interface CarouselProps {
5+
events: eventInfo[];
6+
}
7+
8+
const Carousel: React.FC<CarouselProps> = ({ events }) => {
9+
const [currentIndex, setCurrentIndex] = useState(0);
10+
11+
const prevSlide = () => {
12+
setCurrentIndex((prevIndex) =>
13+
prevIndex === 0 ? events.length - 1 : prevIndex - 1
14+
);
15+
};
16+
17+
const nextSlide = () => {
18+
setCurrentIndex((prevIndex) =>
19+
prevIndex === events.length - 1 ? 0 : prevIndex + 1
20+
);
21+
};
22+
23+
return (
24+
<div className="relative max-w-4xl mx-auto">
25+
<div className="w-full text-center">
26+
<a href={events[currentIndex].link} target="_blank" rel="noopener noreferrer" className="relative block w-full h-64 group">
27+
<img
28+
src={events[currentIndex].image}
29+
alt={events[currentIndex].title}
30+
className="w-full h-64 object-contain rounded-md"
31+
/>
32+
<div className="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center rounded-md">
33+
<div className="text-white text-center p-4">
34+
<h2 className="font-extrabold text-xl mb-2">{events[currentIndex].title}</h2>
35+
<h3 className="font-bold text-lg">{events[currentIndex].location}</h3>
36+
<p className="mt-2">
37+
{new Date(events[currentIndex].startTime).toLocaleDateString()} -{" "}
38+
{new Date(events[currentIndex].endTime).toLocaleDateString()}
39+
</p>
40+
</div>
41+
</div>
42+
</a>
43+
{/* <div className="p-5">
44+
<h2 className="text-3xl font-bold">{events[currentIndex].title}</h2>
45+
<p className="text-lg">{events[currentIndex].description}</p>
46+
<p className="text-sm">Location: {events[currentIndex].location}</p>
47+
<p className="text-sm">
48+
Start Time: {new Date(events[currentIndex].startTime).toLocaleString()}
49+
</p>
50+
<p className="text-sm">
51+
End Time: {new Date(events[currentIndex].endTime).toLocaleString()}
52+
</p>
53+
<a
54+
href={events[currentIndex].link}
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
className="text-blue-500 underline mt-2 block"
58+
>
59+
Event Link
60+
</a>
61+
</div> */}
62+
</div>
63+
64+
{/* Left and right buttons */}
65+
<button
66+
onClick={prevSlide}
67+
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
68+
>
69+
&#10094;
70+
</button>
71+
<button
72+
onClick={nextSlide}
73+
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
74+
>
75+
&#10095;
76+
</button>
77+
78+
{/* Dots indicator */}
79+
<div className="flex justify-center mt-4">
80+
{events.map((_, index) => (
81+
<span
82+
key={index}
83+
className={`h-3 w-3 rounded-full mx-1 cursor-pointer ${
84+
currentIndex === index ? 'bg-blue-500' : 'bg-gray-300'
85+
}`}
86+
onClick={() => setCurrentIndex(index)}
87+
></span>
88+
))}
89+
</div>
90+
</div>
91+
);
92+
};
93+
94+
export default Carousel;

‎frontend/src/components/Event/index.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1+
import React from 'react';
2+
import Carousel from './carousel';
3+
import { events, previousEvents } from '../../../public/data/data';
4+
15
const Event = () => {
26
return (
37
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
48
<div className="text-center my-10">
59
<p className="text-[#3977F8] font-game text-xl">02</p>
610
<h1 className="font-bold text-6xl">EVENTS</h1>
711
</div>
8-
<div className="flex items-center">
9-
<p className="text-center text-3xl">
10-
We run a wide-variety of events for fun, learning new skills and careers. For full
11-
listings, check out the CSESoc Discord or our Facebook page!
12+
<div className="flex items-center justify-start">
13+
<p className="text-center text-2xl font-bold pl-20 pb-10">
14+
Explore upcoming events
15+
</p>
16+
{/* <div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div> */}
17+
</div>
18+
<Carousel events={events}/>
19+
<div className="flex items-center justify-start mt-10">
20+
<p className="text-2xl font-bold pl-20 pb-10">
21+
Previous events
1222
</p>
13-
<div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
1423
</div>
24+
<Carousel events={previousEvents} />
1525
</section>
1626
);
1727
};

0 commit comments

Comments
 (0)