Skip to content

Commit 103149d

Browse files
author
addison
committed
carousel nearly finished, need animation for background
1 parent 7c9ebb7 commit 103149d

File tree

2 files changed

+87
-59
lines changed

2 files changed

+87
-59
lines changed

frontend/src/components/Carousel.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useState } from "react";
2+
import { sponsorInfo } from "../../public/data/sponsorInfos";
3+
4+
interface CarouselImages {
5+
images: { category: string; href: string; svg: string; alt: string; description: string; }[];
6+
onImageClick: (info: sponsorInfo) => void;
7+
}
8+
9+
export default function Carousel({ images, onImageClick }: CarouselImages) {
10+
return (
11+
<div className="carousel flex flex-col items-center w-full px-20 py-6">
12+
<div className="flex justify-center flex-wrap gap-20 w-full">
13+
{images.map((image, index) => (
14+
<img
15+
key={index}
16+
src={image.svg}
17+
alt={image.alt}
18+
className="cursor-pointer transform transition-transform duration-300 hover:scale-105 object-contain"
19+
style={{ height: '150px', maxWidth: '225px' }}
20+
onClick={() => onImageClick(image)}
21+
/>
22+
))}
23+
</div>
24+
</div>
25+
);
26+
}

frontend/src/pages/sponsors.tsx

Lines changed: 61 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,44 @@ import { useState } from 'react';
33
import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos';
44
import SponsorModal from '@/components/Sponsors/SponsorModal';
55
import PageTitle from '@/components/PageTitle';
6+
import Carousel from '@/components/Carousel';
7+
import { motion, AnimatePresence } from 'framer-motion';
68

79
export default function SponsorsPage() {
8-
const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';
9-
const logodiv = 'block gap-y-8 h-14';
1010
const background = 'rgba(57, 119, 248, 0.6)';
1111

1212
const [showModal, setShowModal] = useState(false);
1313
const [information, setInformation] = useState<sponsorInfo | null>(null);
14+
const [currentCategory, setCurrentCategory] = useState<'Diamond' | 'Gold' | 'Silver'>('Diamond');
15+
16+
const sponsors = {
17+
Diamond: diamondLinks,
18+
Gold: goldLinks,
19+
Silver: silverLinks
20+
}
21+
22+
const handleClick = (info: sponsorInfo) => {
23+
setInformation(info);
24+
setShowModal(true);
25+
};
26+
27+
const handleCategoryChange = (category: 'Diamond' | 'Gold' | 'Silver') => {
28+
setCurrentCategory(category);
29+
};
30+
31+
const containerVariants = {
32+
hidden: { opacity: 0, y: 20 },
33+
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
34+
exit: { opacity: 0, y: 20, transition: { duration: 0.3 } },
35+
};
1436

1537
return (
1638
<Layout>
17-
<PageTitle title="SPONSORS" />
18-
39+
<PageTitle title="Our Sponsors" />
40+
1941
<section className="py-8">
2042
<div className="flex justify-center items-center mb-20">
21-
<div className="w-100 flex flex-col gap-16">
43+
<div className="w-full flex flex-col gap-16">
2244
{showModal && (
2345
<SponsorModal
2446
sponsorInfo={information}
@@ -29,63 +51,43 @@ export default function SponsorsPage() {
2951
)}
3052
<div
3153
style={{ backgroundColor: `${background}` }}
32-
className="flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
33-
>
34-
<h2 className="text-4xl font-black">Diamond Sponsors</h2>
35-
{diamondLinks.map((item, index) => {
36-
return (
37-
<div
38-
key={index}
39-
className={`${logodiv}`}
40-
onClick={() => {
41-
setInformation(item);
42-
setShowModal(true);
43-
}}
44-
>
45-
<img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
46-
</div>
47-
);
48-
})}
49-
</div>
50-
<div
51-
style={{ backgroundColor: `${background}` }}
52-
className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
54+
className="relative flex flex-col items-center rounded-[1rem] p-14 gap-16 justify-center"
5355
>
54-
<h2 className="text-4xl font-black">Gold Sponsors</h2>
55-
{goldLinks.map((item, index) => {
56-
return (
57-
<div
58-
key={index}
59-
className=""
60-
onClick={() => {
61-
setInformation(item);
62-
setShowModal(true);
63-
}}
56+
57+
<div className="absolute top-4 left-8 py-8 px-12 w-full flex justify-around">
58+
{['Diamond', 'Gold', 'Silver'].map(category => (
59+
<h2
60+
key={category}
61+
className={`text-2xl mb-4 cursor-pointer transform transition-transform duration-300 ease-in-out ${
62+
currentCategory === category ? 'text-green-500 scale-110' : 'text-white'
63+
} hover:scale-105`}
64+
onClick={() => handleCategoryChange(category as 'Diamond' | 'Gold' | 'Silver')}
6465
>
65-
<img className={`h-6 ${logostyle}`} src={item.svg} alt={item.alt} />
66-
</div>
67-
);
68-
})}
69-
</div>
70-
<div
71-
style={{ backgroundColor: `${background}` }}
72-
className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
73-
>
74-
<h2 className="text-4xl font-black">Silver Sponsors</h2>
75-
{silverLinks.map((item, index) => {
76-
return (
77-
<div
78-
key={index}
79-
className="h-14"
80-
onClick={() => {
81-
setInformation(item);
82-
setShowModal(true);
83-
}}
66+
// {category.toLowerCase()}
67+
</h2>
68+
))}
69+
</div>
70+
71+
<div className="mt-16 w-full flex justify-center flex-wrap gap-24">
72+
<AnimatePresence mode='wait'>
73+
<motion.div
74+
key={currentCategory}
75+
variants={containerVariants}
76+
initial="hidden"
77+
animate="visible"
78+
exit="exit"
79+
className="w-full flex justify-center"
8480
>
85-
<img className={`h-8 ${logostyle}`} src={item.svg} alt={item.alt} />
86-
</div>
87-
);
88-
})}
81+
<Carousel
82+
images={sponsors[currentCategory].map(item => ({
83+
...item,
84+
category: currentCategory,
85+
}))}
86+
onImageClick={handleClick}
87+
/>
88+
</motion.div>
89+
</AnimatePresence>
90+
</div>
8991
</div>
9092
</div>
9193
</div>

0 commit comments

Comments
 (0)