diff --git a/public/events/f24-icebreaker-1.jpg b/public/events/f24-icebreaker-1.jpg new file mode 100644 index 0000000..e66ad92 Binary files /dev/null and b/public/events/f24-icebreaker-1.jpg differ diff --git a/public/events/f24-icebreaker-2.jpg b/public/events/f24-icebreaker-2.jpg new file mode 100644 index 0000000..fb29cba Binary files /dev/null and b/public/events/f24-icebreaker-2.jpg differ diff --git a/public/events/f24-icebreaker-3.jpg b/public/events/f24-icebreaker-3.jpg new file mode 100644 index 0000000..63b8c76 Binary files /dev/null and b/public/events/f24-icebreaker-3.jpg differ diff --git a/public/events/f24-icebreaker-4.jpg b/public/events/f24-icebreaker-4.jpg new file mode 100644 index 0000000..feef92d Binary files /dev/null and b/public/events/f24-icebreaker-4.jpg differ diff --git a/public/events/f24-icebreaker-5.jpg b/public/events/f24-icebreaker-5.jpg new file mode 100644 index 0000000..f7fbddc Binary files /dev/null and b/public/events/f24-icebreaker-5.jpg differ diff --git a/public/events/f24-icebreaker-6.jpg b/public/events/f24-icebreaker-6.jpg new file mode 100644 index 0000000..59a1d7c Binary files /dev/null and b/public/events/f24-icebreaker-6.jpg differ diff --git a/public/events/feb-speaker-series-1.jpg b/public/events/feb-speaker-series-1.jpg new file mode 100644 index 0000000..0ada724 Binary files /dev/null and b/public/events/feb-speaker-series-1.jpg differ diff --git a/public/events/feb-speaker-series-2.jpg b/public/events/feb-speaker-series-2.jpg new file mode 100644 index 0000000..7cbc0b8 Binary files /dev/null and b/public/events/feb-speaker-series-2.jpg differ diff --git a/public/events/feb-speaker-series-3.jpg b/public/events/feb-speaker-series-3.jpg new file mode 100644 index 0000000..08f1e89 Binary files /dev/null and b/public/events/feb-speaker-series-3.jpg differ diff --git a/public/events/mar-speaker-series-1.jpg b/public/events/mar-speaker-series-1.jpg new file mode 100644 index 0000000..9499bbc Binary files /dev/null and b/public/events/mar-speaker-series-1.jpg differ diff --git a/src/components/Event.tsx b/src/components/Event.tsx new file mode 100644 index 0000000..0833ba4 --- /dev/null +++ b/src/components/Event.tsx @@ -0,0 +1,74 @@ +import React, { useState } from "react"; + +type ProjectProps = { + title: string; + description: string; + imgURLs: string[]; +}; + +const Event: React.FC = ({ + title, + description, + imgURLs +}) => { + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + const nextImage = () => { + setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imgURLs.length); + }; + + const prevImage = () => { + setCurrentImageIndex((prevIndex) => + prevIndex === 0 ? imgURLs.length - 1 : prevIndex - 1 + ); + }; + + return ( +
+
+
+

{title}

+
+

{description}

+
+ + {imgURLs.length > 0 && ( +
+ + + {`${title} + + + +
+ {imgURLs.map((_, index) => ( +
+
+ )} +
+ ); +}; + +export default Event; \ No newline at end of file diff --git a/src/components/Events.tsx b/src/components/Events.tsx index ebf6024..c034bba 100644 --- a/src/components/Events.tsx +++ b/src/components/Events.tsx @@ -1,122 +1,133 @@ -import React from "react"; +import React, { useState } from 'react' +import Event from './Event'; +import { EventType } from '../interfaces/event-type'; + +const upcomingEventsList: EventType[] = [ +]; + +const pastEventsList: EventType[] = [ + { + title: "Fall 2024 Icebreaker Event", + description: "At the beginning of the Fall 2024 semester, the we hosted an amazing icebreaker event to kick off the semester! We introduced the club, our executives, shared our vision, and highlighted exciting projects we'll be working on this term. Our project leads gave insightful presentations, sparking enthusiasm among attendees. It was fantastic to welcome so many passionate students eager to dive into open-source development. The pizza and drinks were a hit, making the evening even more memorable!", + imgURLs: [ + "events/f24-icebreaker-1.jpg", + "events/f24-icebreaker-2.jpg", + "events/f24-icebreaker-3.jpg", + "events/f24-icebreaker-4.jpg", + "events/f24-icebreaker-5.jpg", + "events/f24-icebreaker-6.jpg", + ], + }, + { + title: "March Speaker Series", + description: "The March Speaker Series was a fantastic success! We were thrilled to host guest speaker David Hobbs, who shared invaluable industry insights and actionable career tips with our members. His engaging session left attendees inspired and motivated as they plan their career journeys. A heartfelt thank you to everyone who joined us and made this event so special!", + imgURLs: [ + "events/mar-speaker-series-1.jpg", + ], + }, + { + title: "February Speaker Series", + description: "The February Speaker Series was an incredible experience! We were honored to host Charles Tong, who shared valuable insights into the intersection of Tech and Business. His engaging talk provided our members with fresh perspectives and practical knowledge to apply in their journeys. A big thank you to everyone who attended and contributed thoughtful questions, making the event even more impactful. The energy and enthusiasm of our members makes these events so special!", + imgURLs: [ + "events/feb-speaker-series-1.jpg", + "events/feb-speaker-series-2.jpg", + "events/feb-speaker-series-3.jpg" + ], + } +]; const Events = () => { + const [activeTab, setActiveTab] = useState('PAST'); + + const renderEventsList = () => { + let eventsList = []; + let message = ''; + + if (activeTab === 'UPCOMING') { + eventsList = upcomingEventsList; + message = eventsList.length === 0 ? 'No upcoming events at the moment.' : ''; + } else { + eventsList = pastEventsList; + message = eventsList.length === 0 ? 'No past events available.' : ''; + } + + if (eventsList.length === 0 && message) { + return

{message}

; + } + + return eventsList.map((event, index) => ( + + )); + }; + return ( -
-
-
-

Event

-

[some brief description]

- - ./HOME +
+ {/* Hero Section */} +
+
+ {/* Projects and Beyond Section */} +
+

We Touch Grass. We Meet People.

-
-

- We Touch Grass. -
- We Meet People. -

-
-
-

- We are a student club at SFU aimed at bringing together talented - individuals from tech, design, and business. Our primary goal is - to collaborate on projects that contribute to the community while - providing valuable learning opportunities for our members. -

-

- Join us at the SFU Open Source Development Club and be part of a - community dedicated to making a positive impact through technology - and collaboration. + {/* Content Wrapper */} +

+ {/* Left Side (text) */} +
+

+ At the SFU Open Source Development Club, we believe in connecting beyond the screen. Through our engaging events, we create spaces for members to meet, network, and grow both personally and professionally. Whether it‘s through fun social gatherings or insightful guest talks, we foster a sense of community that values authentic connections and shared experiences. Our events go beyond learning—they‘re about building lasting relationships, celebrating diversity, and creating a welcoming environment where everyone feels they belong.

-
-
-

Our Events

+ {/* Our Projects Section */} +
+

Our Events

- PAST - FUTURE + setActiveTab('UPCOMING')}>UPCOMING + setActiveTab('PAST')}>PAST
-
-
-
-

[Event 1 Name]

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - ./DETAILS - -
-
- PLACEHOLDER -
-
-
-
-

[Event 2 Name]

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor - in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, - sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - ./DETAILS - -
-
- PLACEHOLDER -
-
+ +
+ {renderEventsList()}
+
-
-

Start Your Journey With Us

- - ./START_UR_JOURNEY - + {/* Join Us CTA Banner Section */} +
+
+

Start Your Journey With Us

+ +
); diff --git a/src/interfaces/event-type.ts b/src/interfaces/event-type.ts new file mode 100644 index 0000000..70f18c9 --- /dev/null +++ b/src/interfaces/event-type.ts @@ -0,0 +1,5 @@ +export interface EventType { + title: string; + description: string; + imgURLs: string[]; +} \ No newline at end of file