Skip to content

Commit 06daf64

Browse files
derekxu04derekxu04
committed
refactor and fix up sponsor carousel
1 parent 60956be commit 06daf64

File tree

5 files changed

+64
-145
lines changed

5 files changed

+64
-145
lines changed

‎frontend/src/components/Carousel.tsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎frontend/src/components/Sponsors/SponsorCarousel.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { diamondLinks, goldLinks } from "@/../public/data/sponsorInfos";
2+
import Carousel from 'react-multi-carousel';
3+
import 'react-multi-carousel/lib/styles.css';
4+
5+
export default function SponsorCarousel() {
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+
// Show diamond and gold sponsors in carousel
26+
const sponsors = diamondLinks.concat(goldLinks);
27+
28+
return (
29+
<Carousel
30+
responsive={responsive}
31+
infinite={true}
32+
autoPlay={true}
33+
arrows={false}
34+
autoPlaySpeed={3000}
35+
keyBoardControl={false}
36+
transitionDuration={500}
37+
pauseOnHover={false}
38+
containerClass="carousel-container my-8"
39+
>
40+
{sponsors.map((sponsor, index) => (
41+
<div key={index} className="p-4 mx-8 flex justify-center items-center">
42+
<img
43+
src={sponsor.svg}
44+
alt={sponsor.alt}
45+
className="h-24"
46+
/>
47+
</div>
48+
))}
49+
</Carousel>
50+
);
51+
}

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

Lines changed: 5 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,21 @@
11
import React from 'react';
22
import Footer from '@/components/Footer';
3-
import Carousel from 'react-multi-carousel';
4-
import 'react-multi-carousel/lib/styles.css';
3+
import SponsorCarousel from './SponsorCarousel';
54

65
const Sponsors = () => {
7-
const responsive = {
8-
superLargeDesktop: {
9-
breakpoint: { max: 4000, min: 1024 },
10-
items: 3,
11-
},
12-
desktop: {
13-
breakpoint: { max: 1024, min: 768 },
14-
items: 3,
15-
},
16-
tablet: {
17-
breakpoint: { max: 768, min: 464 },
18-
items: 2,
19-
},
20-
mobile: {
21-
breakpoint: { max: 464, min: 0 },
22-
items: 1,
23-
},
24-
};
25-
266
return (
277
<section
288
className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
299
id="sponsors"
3010
>
3111
<div className="text-center">
32-
<h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
12+
<h2 className="font-bold text-6xl">OUR SPONSORS</h2>
3313
</div>
34-
<div className="flex-1 flex justify-center items-center">
14+
<div className="flex-1 flex justify-center items-center my-15">
3515
<div
36-
className="rounded border border-[#595F6D] p-5 h-auto overflow-hidden w-[90rem] flex flex-col gap-8 py-8"
16+
className="rounded border border-[#595F6D] h-auto overflow-hidden w-[90rem] flex flex-col gap-8 py-8"
3717
>
38-
<div className="flex flex-col justify-center items-center">
39-
<h2 className="text-center text-4xl font-black">Our sponsors</h2>
40-
</div>
41-
42-
<Carousel
43-
responsive={responsive}
44-
infinite={true}
45-
autoPlay={true}
46-
arrows={false}
47-
autoPlaySpeed={3000}
48-
keyBoardControl={false}
49-
transitionDuration={500}
50-
pauseOnHover={false}
51-
containerClass="carousel-container my-16"
52-
>
53-
<div className="sponsor-item">
54-
<img src="assets/tiktok_logo.svg" alt="TikTok logo" />
55-
</div>
56-
<div className="sponsor-item">
57-
<img src="assets/janestreet_logo.svg" alt="Jane Street logo" />
58-
</div>
59-
<div className="sponsor-item">
60-
<img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
61-
</div>
62-
<div className="sponsor-item">
63-
<img src="assets/citadel_logo.svg" alt="Citadel logo" />
64-
</div>
65-
<div className="sponsor-item">
66-
<img src="assets/imc_logo.svg" alt="IMC logo" />
67-
</div>
68-
<div className="sponsor-item">
69-
<img src="assets/neara_logo.svg" alt="Neara logo" />
70-
</div>
71-
</Carousel>
72-
18+
<SponsorCarousel />
7319
<div className="flex justify-center items-center">
7420
<a href="sponsors">
7521
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">

‎frontend/src/pages/sponsors.tsx

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,90 +9,53 @@ export default function SponsorsPage() {
99

1010
const [showModal, setShowModal] = useState(false);
1111
const [information, setInformation] = useState<sponsorInfo | null>(null);
12-
const [currentCategory, setCurrentCategory] = useState<'Diamond' | 'Gold' | 'Silver'>('Diamond');
1312

14-
const sponsors = {
15-
Diamond: diamondLinks,
16-
Gold: goldLinks,
17-
Silver: silverLinks
18-
}
19-
20-
const handleClick = (info: sponsorInfo) => {
13+
const handleSponsorClick = (info: sponsorInfo) => {
2114
setInformation(info);
2215
setShowModal(true);
2316
};
2417

25-
const handleCategoryChange = (category: 'Diamond' | 'Gold' | 'Silver') => {
26-
setCurrentCategory(category);
27-
};
28-
29-
const containerVariants = {
30-
hidden: { opacity: 0, y: 20 },
31-
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
32-
exit: { opacity: 0, y: 20, transition: { duration: 0.3 } },
33-
};
34-
3518
return (
3619
<Layout>
3720
<section className="py-8">
38-
<h2 className="text-4xl font-black text-center font-bold">Diamond Sponsors</h2>
21+
<h2 className="text-4xl font-black text-center font-bold">DIAMOND SPONSORS</h2>
3922
<div>
4023
<div className="w-100 flex flex-col gap-16">
4124
{showModal && (
4225
<SponsorModal
4326
sponsorInfo={information}
44-
setFalse={() => {
45-
setShowModal(false);
46-
}}
27+
setFalse={() => setShowModal(false)}
4728
/>
4829
)}
4930
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-center rounded border-2 border-[#595F6D] my-10">
5031
{diamondLinks.map((item, index) => {
5132
return (
52-
<div
53-
key={index}
54-
onClick={() => {
55-
setInformation(item);
56-
setShowModal(true);
57-
}}
58-
>
33+
<div key={index} onClick={() => handleSponsorClick(item)}>
5934
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
6035
</div>
6136
);
6237
})}
6338
</div>
6439
</div>
6540
</div>
66-
<h2 className="text-4xl font-black text-center font-bold">Gold Sponsors</h2>
41+
<h2 className="text-4xl font-black text-center font-bold">GOLD SPONSORS</h2>
6742
<div>
6843
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
6944
{goldLinks.map((item, index) => {
7045
return (
71-
<div
72-
key={index}
73-
onClick={() => {
74-
setInformation(item);
75-
setShowModal(true);
76-
}}
77-
>
46+
<div key={index} onClick={() => handleSponsorClick(item)}>
7847
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
7948
</div>
8049
);
8150
})}
8251
</div>
8352
</div>
84-
<h2 className="text-4xl font-black text-center font-bold">Silver Sponsors</h2>
53+
<h2 className="text-4xl font-black text-center font-bold">SILVER SPONSORS</h2>
8554
<div>
8655
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
8756
{silverLinks.map((item, index) => {
8857
return (
89-
<div
90-
key={index}
91-
onClick={() => {
92-
setInformation(item);
93-
setShowModal(true);
94-
}}
95-
>
58+
<div key={index} onClick={() => handleSponsorClick(item)}>
9659
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
9760
</div>
9861
);

‎frontend/src/styles/globals.css

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,3 @@ body {
2929
.hover-animate:hover {
3030
transform: scale(1.03);
3131
}
32-
33-
.sponsor-item {
34-
padding: 16px;
35-
margin: 0 2rem;
36-
display: flex;
37-
justify-content: center;
38-
align-items: center;
39-
}
40-
41-
.sponsor-item img {
42-
width: 24rem;
43-
height: 8rem;
44-
object-fit: contain;
45-
filter: brightness(0) invert(1);
46-
}

0 commit comments

Comments
 (0)