Skip to content

Commit e8207a7

Browse files
Miran-FirdausiMiran-Firdausi
committed
fix: improve styling of events page
1 parent d01eb96 commit e8207a7

File tree

12 files changed

+339
-75
lines changed

12 files changed

+339
-75
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"framer-motion": "^11.5.4",
2525
"gsap": "^3.12.5",
2626
"lodash": "^4.17.21",
27+
"lucide-react": "^0.469.0",
2728
"prop-types": "^15.8.1",
2829
"react": "^18.2.0",
2930
"react-dom": "^18.2.0",

‎public/gallery/RUST SESSION/rs2.HEIC‎

-1.98 MB
Binary file not shown.

‎public/gallery/RUST SESSION/rs2.jpg‎

1.54 MB
Loading

‎public/gallery/RUST SESSION/rs3.HEIC‎

-1.67 MB
Binary file not shown.

‎public/gallery/RUST SESSION/rs3.jpg‎

1.48 MB
Loading

‎src/pages/Events/Card.jsx‎

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

‎src/pages/Events/EventPage.jsx‎

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

‎src/pages/Events/EventsCard.jsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { useMemo, useState, useEffect } from "react";
2+
import { X, ChevronLeft, ChevronRight } from "lucide-react";
3+
import PropTypes from "prop-types";
4+
import Tilt from "react-parallax-tilt";
5+
6+
const getRandomColor = () => {
7+
const r = Math.floor(Math.random() * 150);
8+
const g = Math.floor(Math.random() * 150);
9+
const b = Math.floor(Math.random() * 150);
10+
return `rgba(${r}, ${g}, ${b}, 0.3)`;
11+
};
12+
13+
function ImageCarousel({
14+
images,
15+
interval = 3000,
16+
onManualChange,
17+
className,
18+
isModal,
19+
}) {
20+
const [currentIndex, setCurrentIndex] = useState(0);
21+
const [isHovered, setIsHovered] = useState(false);
22+
23+
useEffect(() => {
24+
let timer;
25+
if ((isHovered || isModal) && !onManualChange) {
26+
timer = setInterval(() => {
27+
setCurrentIndex((prev) => (prev + 1) % images.length);
28+
}, interval);
29+
}
30+
return () => clearInterval(timer);
31+
}, [images.length, interval, onManualChange, isHovered, isModal]);
32+
33+
const handleMouseLeave = () => {
34+
setIsHovered(false);
35+
setCurrentIndex(0);
36+
};
37+
38+
const handlePrev = (e) => {
39+
e.stopPropagation();
40+
setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
41+
};
42+
43+
const handleNext = (e) => {
44+
e.stopPropagation();
45+
setCurrentIndex((prev) => (prev + 1) % images.length);
46+
};
47+
48+
return (
49+
<div
50+
className="relative w-full h-full"
51+
onMouseEnter={() => setIsHovered(true)}
52+
onMouseLeave={handleMouseLeave}
53+
>
54+
<img
55+
src={images[currentIndex]}
56+
alt={`Slide ${currentIndex}`}
57+
className={className}
58+
/>
59+
{images.length > 1 && (
60+
<>
61+
{isModal && (
62+
<>
63+
<button
64+
onClick={handlePrev}
65+
type="button"
66+
className="absolute left-2 top-1/2 -translate-y-1/2 p-1 bg-black/30 rounded-full text-white hover:bg-black/50"
67+
>
68+
<ChevronLeft className="h-6 w-6" />
69+
</button>
70+
<button
71+
onClick={handleNext}
72+
type="button"
73+
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 bg-black/30 rounded-full text-white hover:bg-black/50"
74+
>
75+
<ChevronRight className="h-6 w-6" />
76+
</button>
77+
</>
78+
)}
79+
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
80+
{images.map((image, idx) => (
81+
<div
82+
key={image}
83+
className={`h-1.5 w-1.5 rounded-full ${
84+
idx === currentIndex ? "bg-white" : "bg-white/50"
85+
}`}
86+
/>
87+
))}
88+
</div>
89+
</>
90+
)}
91+
</div>
92+
);
93+
}
94+
95+
function EventsCard({ event }) {
96+
const [showModal, setShowModal] = useState(false);
97+
const randomColor = useMemo(() => getRandomColor(), []);
98+
99+
const truncateText = (text, length) =>
100+
text.length > length ? `${text.slice(0, length)}...` : text;
101+
102+
return (
103+
<>
104+
<div
105+
role="button"
106+
tabIndex={0}
107+
onClick={() => setShowModal(true)}
108+
onKeyPress={(e) => {
109+
if (e.key === "Enter" || e.key === " ") setShowModal(true);
110+
}}
111+
className="w-full"
112+
>
113+
<Tilt tiltMaxAngleX={5} tiltMaxAngleY={5}>
114+
<div className="relative inline-block w-full h-[400px] md:h-[350px] overflow-hidden rounded-xl shadow-lg cursor-pointer transition-transform">
115+
<ImageCarousel
116+
images={event.images}
117+
className="w-full h-full object-cover object-bottom rounded-t-xl"
118+
/>
119+
<div
120+
className="absolute bottom-0 w-full flex flex-col justify-center backdrop-blur-md rounded-b-xl p-4"
121+
style={{ backgroundColor: randomColor }}
122+
>
123+
<h3 className="text-white font-semibold mb-1 text-ellipsis whitespace-nowrap overflow-hidden">
124+
{event.title}
125+
</h3>
126+
<p className="text-white text-xs mb-1">{event.date}</p>
127+
<p className="text-white text-sm">
128+
{truncateText(event.description, 100)}
129+
</p>
130+
</div>
131+
</div>
132+
</Tilt>
133+
</div>
134+
135+
{showModal && (
136+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
137+
<div className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto relative">
138+
<button
139+
type="button"
140+
onClick={() => setShowModal(false)}
141+
className="absolute right-4 top-4 p-1 hover:bg-gray-100 rounded-full z-10"
142+
>
143+
<X className="h-6 w-6" />
144+
</button>
145+
<div className="h-64">
146+
<ImageCarousel
147+
images={event.images}
148+
interval={5000}
149+
onManualChange
150+
className="w-full h-full object-contain object-bottom rounded-t-xl"
151+
isModal
152+
/>
153+
</div>
154+
<div className="p-6">
155+
<h2 className="text-2xl font-bold mb-2">{event.title}</h2>
156+
<p className="text-gray-600 mb-4">{event.date}</p>
157+
<p className="text-gray-800">{event.description}</p>
158+
</div>
159+
</div>
160+
</div>
161+
)}
162+
</>
163+
);
164+
}
165+
166+
ImageCarousel.propTypes = {
167+
images: PropTypes.arrayOf(
168+
PropTypes.shape({
169+
src: PropTypes.string.isRequired,
170+
alt: PropTypes.string,
171+
}),
172+
).isRequired,
173+
interval: PropTypes.number,
174+
onManualChange: PropTypes.func,
175+
className: PropTypes.string,
176+
isModal: PropTypes.bool,
177+
};
178+
179+
ImageCarousel.defaultProps = {
180+
interval: 3000,
181+
onManualChange: null,
182+
className: "",
183+
isModal: false,
184+
};
185+
186+
EventsCard.propTypes = {
187+
event: PropTypes.shape({
188+
images: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of image URLs
189+
title: PropTypes.string.isRequired,
190+
date: PropTypes.string.isRequired,
191+
description: PropTypes.string.isRequired,
192+
}).isRequired,
193+
};
194+
195+
export default EventsCard;

‎src/pages/Events/dependency.txt‎

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

‎src/pages/Events/events.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
const events = [
2+
{
3+
images: [
4+
"/CodeX-Website/gallery/AIML SESSION/aiml6.jpg",
5+
"/CodeX-Website/gallery/AIML SESSION/aiml1.jpg",
6+
"/CodeX-Website/gallery/AIML SESSION/aiml2.jpg",
7+
"/CodeX-Website/gallery/AIML SESSION/aiml3.jpg",
8+
"/CodeX-Website/gallery/AIML SESSION/aiml4.jpg",
9+
"/CodeX-Website/gallery/AIML SESSION/aiml5.jpg",
10+
],
11+
title: "AIML Session",
12+
date: "14th October, 2023",
13+
description:
14+
"Conducted an engaging and informative event focused on the principles and applications of Artificial Intelligence and Machine Learning. Attendees were captivated by the in-depth exploration of these transformative technologies.",
15+
},
16+
{
17+
images: [
18+
"/CodeX-Website/gallery/RUST SESSION/rs1.JPG",
19+
"/CodeX-Website/gallery/RUST SESSION/rs2.jpg",
20+
"/CodeX-Website/gallery/RUST SESSION/rs3.jpg ",
21+
],
22+
title: "Rust Session",
23+
date: "7th October, 2023",
24+
description:
25+
"Conducted an engaging event that delved into the intricacies of Rust programming. An exploration of this powerful and efficient programming language. Participants gained valuable insights into its practical applications and unique features.",
26+
},
27+
{
28+
images: [
29+
"/CodeX-Website/gallery/HackTober Fest/htf1_1.jpg",
30+
"/CodeX-Website/gallery/HackTober Fest/htf2_1.jpg",
31+
"/CodeX-Website/gallery/HackTober Fest/htf3_1.jpg",
32+
"/CodeX-Website/gallery/HackTober Fest/htf4_1.jpg",
33+
"/CodeX-Website/gallery/HackTober Fest/htf5_1.jpg",
34+
],
35+
title: "Hacktober Fest - Open Source Contribution Session",
36+
date: "30th September, 2023",
37+
description:
38+
"During the event, we guided participants through the essential steps of getting started with open-source: from cloning repositories to making commits, and finally, opening pull requests. By the end of the session, students gained hands-on experience and the confidence to contribute to Hacktoberfest and other open-source projects, fostering a deeper understanding of collaborative coding and community-driven development.",
39+
},
40+
{
41+
images: [
42+
"/CodeX-Website/gallery/Generative ai session/gas1.jpg",
43+
"/CodeX-Website/gallery/Generative ai session/gas2.jpg",
44+
"/CodeX-Website/gallery/Generative ai session/gas3.jpg",
45+
],
46+
title:
47+
"Guest lecture on generative AI for Building and Scaling Applications in the Real World",
48+
date: "3rd February, 2024",
49+
description:
50+
"Hosted a guest lecture by Shubham Londhe. He shared insights into practical applications of Generative AI, discussing its role in creativity and scalability challenges. It was a deep dive into the practical applications of Generative AI. He explored how this cutting-edge technology can spark creativity and address real-world scalability challenges.",
51+
},
52+
{
53+
images: [
54+
"/CodeX-Website/gallery/Laser Lock/ll1.jpg",
55+
"/CodeX-Website/gallery/Laser Lock/ll4.jpg",
56+
"/CodeX-Website/gallery/Laser Lock/ll5.jpg",
57+
"/CodeX-Website/gallery/Laser Lock/ll6.jpg",
58+
"/CodeX-Website/gallery/Laser Lock/ll7.jpg",
59+
"/CodeX-Website/gallery/Laser Lock/ll8.jpg",
60+
"/CodeX-Website/gallery/Laser Lock/ll9.jpg",
61+
],
62+
title: "Laser Lock - SymbiTech",
63+
date: "20th September, 2024- 21st September, 2024",
64+
description:
65+
"A major success at the annual techfest (Symbitech) of SIT, Pune. Participant's programming skills were put to the test as well as their shooting abilities with a prize of INR 8000.",
66+
},
67+
// {
68+
// title: "Project Exhibition",
69+
// date: "21st April, 2023",
70+
// description:
71+
// "Event where we invited various industry experts to provide their valuable suggestions and reviews for student’s PBL-1 and PBL-2 projects. A great way for students to receive constructive criticism from industry experts and identify areas of improvement. It had a cash prize of INR 3500 for first place, INR 2500 for second place, and INR 1500 for third place.",
72+
// },
73+
// {
74+
// title: "Git and Github Session",
75+
// date: "27th March, 2023",
76+
// description:
77+
// "The session provided students with invaluable learning experience, covering the essentials of Git and GitHub and their practical applications in software development. Certificates were also provided to participants.",
78+
// },
79+
// {
80+
// title: "The Bug Detective",
81+
// date: "8th April, 2022",
82+
// description:
83+
// "This was a debugging competition designed by our team of seasoned coders to test your coding knowledge and determination. The faster participants debug the codes, the closer they get to winning a share of the INR 3000 prize.",
84+
// },
85+
// {
86+
// title: "Learning Series",
87+
// date: "10th February, 2022- 11th February, 2022",
88+
// description:
89+
// "An Intermediate Level Programming Course, led by Moubani Ghosh and Antriksh Sharma, who are accomplished competitive coders with a strong grasp of Data Structures and Algorithms (DSA).",
90+
// },
91+
// {
92+
// title: "Study Abroad Webinar",
93+
// date: "12th December, 2021",
94+
// description:
95+
// "SIT alumni Mukul Shinde: Master’s degree holder in Mechanical and Aerospace Engineering from Illinois Institute of Technology, and Quality Engineer at MilliporeSigma, U.S, Rashi Dhir: SIT graduate currently pursuing her Master’s in Computer Science at New York University, Siddharth Vyas: Final-year B.Tech student in IT at SIT. Participants gained valuable insights and advice on studying abroad from these experienced professionals.",
96+
// },
97+
// {
98+
// title: "Webinar on Greenware Software",
99+
// date: "31st March, 2024",
100+
// description:
101+
// "Conducted by CodeX in collaboration with the Department of Computer Science and Engineering, featured Kedar Deo, Vice President at Tech Mahindra. Delved into the role of technology for creating a more sustainable future, eco-friendly coding practices and the environmental impact of software.",
102+
// },
103+
];
104+
105+
export default events;

0 commit comments

Comments
 (0)