Merge pull request #140 from SewonKim0/events-redesign

Events redesign

src/components/Card.tsx

@@ -10,7 +10,7 @@ type CardProps = {
 };
 
 const classes = {
-  base: 'bg-white border-gray-300 border dark:bg-neutral-900 dark:border-neutral-700 hover:bg-gray-200 dark:hover:bg-neutral-800 transition-colors',
+  base: 'group bg-white border-gray-300 border dark:bg-neutral-900 dark:border-neutral-700 hover:bg-gray-200 dark:hover:bg-neutral-800 transition-colors',
   size: {
     small: 'p-4 text-sm',
     normal: 'p-8',

src/components/EventsList.tsx

@@ -8,7 +8,7 @@ interface EventsListProps {
   count?: number;
 }
 
-const getDateText = (event: Event) => {
+export const getDateText = (event: Event) => {
   const day = Intl.DateTimeFormat(undefined, {
     month: 'long',
     day: 'numeric',
@@ -26,11 +26,15 @@ const EventsList = ({ events, count }: EventsListProps) => {
     <>
       <div className='grid gap-12 grid-cols-1 sm:grid-cols-2'>
         {events.map((event) => (
-          <Card shadow='none' key={event.title}>
+          <Card shadow='none' link={!event.imgsList ? undefined : `/event?index=${event.eventIndex}`} key={event.title}>
             <div className='-m-8 mb-0'>
               <img className='w-full h-48 rounded-t-lg object-cover' src={event.cover} alt='' />
             </div>
-            <h3 className='mt-6 text-xl font-bold'>{event.title}</h3>
+            <div className='flex justify-between items-center p-2 pt-3'> 
+              <h3 className='text-xl font-bold'>{event.title}</h3> 
+              {!event.imgsList ? null :
+              <div className='group-hover:bg-neutral-600 border-2 px-3 py-2 text-lg rounded-md transition-colors'> View </div>}
+            </div>
             <ul className='text-zinc-600 dark:text-zinc-400'>
               <li className='my-2 flex gap-x-2'>
                 <Clock className='flex-shrink-0 inline-block' />

src/components/Footer.tsx

@@ -17,7 +17,7 @@ function Footer() {
           <p>NYU’s premier open source club</p>
           <div className='flex flex-row gap-x-4'>
             {SOCIAL_ICONS.map(({ to, getMark }) => (
-              <a key={to} href={to} target='_blank' rel='noopener noreferrer'>
+              <a className='hover:scale-110' key={to} href={to} target='_blank' rel='noopener noreferrer'>
                 {getMark()}
               </a>
             ))}
@@ -26,7 +26,7 @@ function Footer() {
         <p>
           <a
             href='https://discord.com/invite/75jgtXy7rz'
-            className='text-purple-400 font-bold'
+            className='text-purple-400 font-bold hover:text-pink-200'
             target='_blank'
             rel='noopener noreferrer'
           >

src/components/NavBar.tsx

@@ -15,6 +15,7 @@ function NavBar() {
   const { currentTheme, toggleCurrentTheme } = useThemeContext();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
 
+  // close nav links menu on browser resize
   useEffect(() => {
     const handleResize = () => setIsMobileMenuOpen(false);
     window.addEventListener('resize', handleResize);
@@ -28,19 +29,26 @@ function NavBar() {
   return (
     <header>
       <nav className='flex max-w-5xl mx-auto items-center justify-between flex-wrap p-8'>
+        {/* BUGS Icon */}
         <div className='flex items-center flex-shrink-0'>
           <Link to='/' className='text-xl font-bold dark:text-stone-100'>
             BUGS
           </Link>
         </div>
+
+        {/* Open/Close Mobile Menu */}
         <div className='block md:hidden'>
-          <button className='flex w-10 h-10 items-center justify-center' onClick={toggleMobileMenu}>
+          <button 
+            className={`${currentTheme === "light" ? "text-black" : "text-white"} flex w-10 h-10 items-center justify-center`}
+            onClick={toggleMobileMenu}>
             {isMobileMenuOpen ? <Cancel /> : <Menu />}
           </button>
         </div>
+
+        {/* Nav Links (for mobile & desktop) */}
         <div
           className={`${
-            isMobileMenuOpen ? 'h-44' : 'h-0'
+            isMobileMenuOpen ? '' : 'h-0'
           } w-full block truncate flex-grow mt-2 transition-height duration-100 md:mt-0 md:flex md:items-center md:w-auto md:h-auto`}
         >
           <div className='md:flex md:flex-row md:flex-grow md:space-x-12 md:justify-center'>
@@ -54,7 +62,9 @@ function NavBar() {
               </Link>
             ))}
           </div>
-          <div className='md:flex md:flex-row gap-2'>
+
+          {/* Join Button & Light/Dark Toggle */}
+          <div className='flex flex-row gap-2'>
             <a href='https://discord.gg/75jgtXy7rz'>
               <Button variant='secondary' className='px-6'>
                 Join

src/components/Slider.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
+
+type SliderProps = {
+    children: React.ReactNode[];
+}
+
+function Slider({ children }: SliderProps) {
+    const [sliderIndex, setSliderIndex] = useState(0);
+
+    return (<div className="overflow-hidden relative rounded-xl">
+        {/* Slider Content */}
+        <div className="flex transition-transform"
+            style={{
+                transform: `translateX(-${sliderIndex * 100}%)`,
+            }}>
+            {children.map((element, elementIndex) => 
+                <div className="flex-none w-full bg-orange-900" key={elementIndex}>
+                    {element}
+                </div>
+            )}
+        </div>
+
+        {/* Left Button */}
+        <button className="absolute left-0 top-1/2 border-2 border-l-0 border-white rounded-r-xl -translate-y-1/2 hover:bg-opacity-[0.3] hover:bg-white"
+            style={{
+                display: sliderIndex === 0 ? "none" : "block"
+            }}
+            onClick={() => {
+                if (sliderIndex === 0) {
+                    return;
+                }
+                setSliderIndex(sliderIndex - 1);
+            }}> <NavArrowLeft width={50} height={80} /> </button>
+
+        {/* Right Button */}
+        <button className="absolute right-0 top-1/2 border-2 border-r-0 border-white rounded-l-xl -translate-y-1/2 hover:bg-opacity-[0.3] hover:bg-white"
+            style={{
+                display: sliderIndex === children.length - 1 ? "none" : "block"
+            }}
+            onClick={() => {
+                if (sliderIndex === children.length - 1) {
+                    return;
+                }
+                setSliderIndex(sliderIndex + 1);
+            }}> <NavArrowRight width={50} height={80} /> </button>
+    </div>);
+}
+
+export default Slider;

src/data/events.ts

@@ -6,6 +6,8 @@ export interface Event {
   endTime: string;
   location: string;
   cover: string;
+  imgsList?: string[];
+  eventIndex?: number;
 }
 
 export const EVENTS: Event[] = [
@@ -17,6 +19,13 @@ export const EVENTS: Event[] = [
     endTime: '6 PM',
     location: 'WWH Room 101',
     cover: '/images/events/bugssxgoogle.jpg',
+    imgsList: ['/images/events-pictures/google/1.jpg',
+    '/images/events-pictures/google/2.jpg',
+    '/images/events-pictures/google/3.jpg',
+    '/images/events-pictures/google/4.jpg',
+    '/images/events-pictures/google/5.jpg',
+    '/images/events-pictures/google/6.jpg'
+    ],
   },
   {
     title: 'BUGS Kickoff Event',
@@ -35,6 +44,14 @@ export const EVENTS: Event[] = [
     endTime: '6:30 PM',
     location: 'WWH Room 101',
     cover: '/images/events/anubis.jpg',
+    imgsList: ['/images/events-pictures/anubis/1.jpg',
+    '/images/events-pictures/anubis/2.jpg',
+    '/images/events-pictures/anubis/3.jpg',
+    '/images/events-pictures/anubis/4.jpg',
+    '/images/events-pictures/anubis/5.jpg',
+    '/images/events-pictures/anubis/6.jpg',
+    '/images/events-pictures/anubis/7.jpg'
+    ]
   },
   {
     title: 'Tech Fest',

src/pages/event.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Event, EVENTS } from '../data/events';
+import type { HeadFC, PageProps } from 'gatsby';
+import Layout from '../components/Layout';
+import { Clock, PinAlt } from 'iconoir-react';
+import { getDateText } from '../components/EventsList';
+import Slider from '../components/Slider';
+
+const EventsPage: React.FC<PageProps> = ({ location }) => {
+    // get event index via query var
+    const queryParams = new URLSearchParams(location.search);
+    const index = parseInt( queryParams.get('index') ?? '0' );
+    if (isNaN(index) || index < 0 || index >= EVENTS.length) {
+        return <Layout> <h1> Error: Invalid page </h1> </Layout>;
+    }
+
+    // get event data
+    const event = EVENTS[index];
+
+    if (!event.imgsList) {
+        return <Layout> <h1> Error: Invalid event - images not found </h1> </Layout>;
+    }
+
+    return (
+        <Layout>
+            <div className='max-w-5xl mx-auto px-8 flex flex-col py-8'>
+                <h1 className='text-2xl'> {event.title} </h1>
+
+                <ul className='text-zinc-600 dark:text-zinc-400 m-3'>
+                    <li className='my-2 flex gap-x-2'>
+                        <Clock className='flex-shrink-0 inline-block' />
+                        {getDateText(event)}
+                    </li>
+                    <li className='my-2 flex gap-x-2'>
+                        <PinAlt className='flex-shrink-0 inline-block' />
+                        {event.location}
+                    </li>
+                </ul>
+
+                <p className="mb-5"> {event.description} </p>
+
+                <Slider>
+                    {event.imgsList.map((imgSrc, imgIndex) => 
+                    <img
+                        src={imgSrc}
+                        width="100%" height="auto"
+                        key={imgIndex}
+                    />)}
+                </Slider>
+            </div>
+        </Layout>
+    );
+};
+
+export default EventsPage;
+
+// TODO: edit the page title accordingly
+export const Head: HeadFC = () => <title>Events</title>;

src/pages/events.tsx

@@ -5,11 +5,13 @@ import Layout from '../components/Layout';
 import EventsList from '../components/EventsList';
 
 const EventsPage: React.FC<PageProps> = () => {
+  // assign event indices for id, split to past & upcoming events
   const currDate = new Date().setHours(0, 0, 0, 0);
-  const upcomingEvents = EVENTS.filter(({ date }: Event) => date.getTime() >= currDate).sort(
+  const eventsWithIndices = EVENTS.map((event, eventIndex) => ({ ...event, eventIndex }));
+  const upcomingEvents = eventsWithIndices.filter(({ date }: Event) => date.getTime() >= currDate).sort(
     (a: Event, b: Event) => a.date.getTime() - b.date.getTime(),
   );
-  const pastEvents = EVENTS.filter(({ date }: Event) => date.getTime() < currDate).sort(
+  const pastEvents = eventsWithIndices.filter(({ date }: Event) => date.getTime() < currDate).sort(
     (a: Event, b: Event) => b.date.getTime() - a.date.getTime(),
   );