Skip to content

Commit 7f9d647

Browse files
Domin0deDomin0de
committed
Replace previous events carousel with gallery, remove previous events from home page and switch to multi-carousel
1 parent 7492572 commit 7f9d647

File tree

8 files changed

+169
-109
lines changed

8 files changed

+169
-109
lines changed

Diff for: ‎frontend/package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"postcss": "8.4.29",
2626
"react": "18.2.0",
2727
"react-dom": "18.2.0",
28+
"react-grid-gallery": "^1.0.1",
2829
"react-multi-carousel": "^2.8.5",
2930
"tailwindcss": "3.3.3",
3031
"typescript": "5.1"

Diff for: ‎frontend/src/components/Event/EventsBrief.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { events } from '../../../public/data/events';
3+
import EventsCarousel from './EventsCarousel';
4+
5+
const EventBrief = () => {
6+
return (
7+
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
8+
<div className="text-center my-10">
9+
<h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
10+
</div>
11+
{events.length !== 0 ?
12+
<EventsCarousel/> :
13+
<div className="flex items-center justify-center h-96">
14+
<p className="text-2xl">No upcoming events... check back here later!</p>
15+
</div>
16+
}
17+
<div className="flex justify-center items-center">
18+
<a href="events">
19+
<button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
20+
See all events
21+
</button>
22+
</a>
23+
</div>
24+
</section>
25+
);
26+
};
27+
28+
export default EventBrief;

Diff for: ‎frontend/src/components/Event/EventsCarousel.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { events } from '@/../public/data/events';
2+
import Carousel from 'react-multi-carousel';
3+
import 'react-multi-carousel/lib/styles.css';
4+
5+
export default function EventsCarousel() {
6+
const responsive = {
7+
superLargeDesktop: {
8+
breakpoint: { max: 4000, min: 1024 },
9+
items: 3,
10+
},
11+
desktop: {
12+
breakpoint: { max: 1024, min: 768 },
13+
items: 3,
14+
},
15+
tablet: {
16+
breakpoint: { max: 768, min: 464 },
17+
items: 2,
18+
},
19+
mobile: {
20+
breakpoint: { max: 464, min: 0 },
21+
items: 1,
22+
},
23+
};
24+
25+
return (
26+
<Carousel
27+
responsive={responsive}
28+
infinite={true}
29+
autoPlay={true}
30+
arrows={true}
31+
autoPlaySpeed={6000}
32+
keyBoardControl={false}
33+
transitionDuration={1000}
34+
pauseOnHover={false}
35+
containerClass="carousel-container my-8"
36+
>
37+
{events.map((event, index) => (
38+
<div key={index} className="w-full text-center">
39+
<a href={event.link} target="_blank" rel="noopener noreferrer" className="relative block w-full h-64 group transition-opacity duration-3000">
40+
<img
41+
src={event.image}
42+
alt={event.title}
43+
className="w-full h-64 object-contain rounded-md"
44+
/>
45+
<div className="w-full h-64 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">
46+
<div className="text-white text-center p-4">
47+
<h2 className="font-extrabold text-xl mb-2">{event.title}</h2>
48+
<h3 className="font-bold text-lg">{event.location}</h3>
49+
<p className="mt-2">
50+
{formatEventDate(event.startTime, event.endTime)}
51+
</p>
52+
</div>
53+
</div>
54+
</a>
55+
</div>
56+
))}
57+
</Carousel>
58+
);
59+
}
60+
61+
const formatEventDate = (startTime: string, endTime: string): string => {
62+
const startDate = new Date(startTime);
63+
const endDate = new Date(endTime);
64+
65+
const sameDay = startDate.toDateString() === endDate.toDateString();
66+
67+
if (sameDay) {
68+
return startDate.toLocaleDateString();
69+
} else {
70+
return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
71+
}
72+
};

Diff for: ‎frontend/src/components/Event/EventsGallery.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { previousEvents } from '../../../public/data/events';
3+
import { Gallery } from "react-grid-gallery";
4+
5+
const EventGallery = () => {
6+
const formattedEvents = previousEvents.map((event) => {
7+
return {
8+
src: event.image,
9+
height: 256,
10+
width: 500,
11+
customOverlay: (
12+
<div className="absolute inset-0 bg-black bg-opacity-60 opacity-100 transition-opacity duration-300 flex items-center justify-center">
13+
<div className="text-white text-center p-4">
14+
<h2 className="font-extrabold text-xl mb-2">{event.title}</h2>
15+
<h3 className="font-bold text-lg">{event.location}</h3>
16+
<p className="mt-2">
17+
{formatEventDate(event.startTime, event.endTime)}
18+
</p>
19+
</div>
20+
</div>
21+
),
22+
};
23+
});
24+
25+
return (
26+
<Gallery
27+
images={formattedEvents}
28+
enableImageSelection={false}
29+
/>
30+
);
31+
};
32+
33+
export default EventGallery;
34+
35+
const formatEventDate = (startTime: string, endTime: string): string => {
36+
const startDate = new Date(startTime);
37+
const endDate = new Date(endTime);
38+
39+
const sameDay = startDate.toDateString() === endDate.toDateString();
40+
41+
if (sameDay) {
42+
return startDate.toLocaleDateString();
43+
} else {
44+
return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
45+
}
46+
};

Diff for: ‎frontend/src/components/Event/carousel.tsx

-102
This file was deleted.

Diff for: ‎frontend/src/components/Event/index.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
2-
import Carousel from './carousel';
3-
import { events, previousEvents } from '../../../public/data/events';
2+
import { events } from '../../../public/data/events';
3+
import EventsCarousel from './EventsCarousel';
4+
import EventGallery from './EventsGallery';
45

56
const Event = () => {
67
return (
78
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
89
<div className="text-center my-10">
9-
<h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
10+
<h1 className="font-bold text-6xl">EVENTS</h1>
1011
</div>
1112
<div className="flex items-center">
1213
<div className="flex flex-col text-center">
@@ -22,8 +23,13 @@ const Event = () => {
2223
</div>
2324
<div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
2425
</div>
26+
<div className="flex items-center justify-start mt-10">
27+
<p className="text-2xl font-bold pl-20">
28+
Explore upcoming events
29+
</p>
30+
</div>
2531
{events.length !== 0 ?
26-
<Carousel events={events}/> :
32+
<EventsCarousel/> :
2733
<div className="flex items-center justify-center h-96">
2834
<p className="text-2xl">No upcoming events... check back here later!</p>
2935
</div>
@@ -33,7 +39,7 @@ const Event = () => {
3339
Previous events
3440
</p>
3541
</div>
36-
<Carousel events={previousEvents} />
42+
<EventGallery />
3743
</section>
3844
);
3945
};

Diff for: ‎frontend/src/pages/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Landing from '@/components/Landing';
22
import Sponsors from '@/components/Sponsors/index';
3-
import Event from '@/components/Event';
43
import AboutHomePage from '@/components/About/AboutHomepage';
4+
import EventsBrief from '@/components/Event/EventsBrief';
55

66
export default function HomePage() {
77
return (
88
<section>
99
<Landing />
1010
<AboutHomePage />
11-
<Event />
11+
<EventsBrief />
1212
<Sponsors />
1313
</section>
1414
);

0 commit comments

Comments
 (0)