add dropdown

acmucsd · Apr 6, 2024 · d4b1631 · d4b1631
1 parent 044dd32
commit d4b1631
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 7 deletions.
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -12,6 +12,10 @@ const LINKS = [
     name: 'Home',
     href: '/',
   },
+  {
+    name: 'Schedule',
+    href: '/#schedule',
+  },
   {
     name: 'Sponsors',
     href: '/#sponsors',

diff --git a/src/sections/landing/schedule/index.tsx b/src/sections/landing/schedule/index.tsx
@@ -1,12 +1,23 @@
+import { useState } from 'react';
 import { FRIDAY_SCHEDULE } from './schedule';
 import styles from './style.module.scss';
 
 const Schedule = () => {
+  const [display, setDisplay] = useState<'Friday' | 'Saturday'>('Friday');
   const schedule = FRIDAY_SCHEDULE;
 
   return (
-    <div className={styles.container}>
-      <h2>Schedule</h2>
+    <div className={styles.container} id="schedule">
+      <div className={styles.header}>
+        <h2>Schedule</h2>
+        <select
+          value={display}
+          onChange={e => setDisplay(e.target.value === 'Friday' ? 'Friday' : 'Saturday')}
+        >
+          <option>Friday</option>
+          <option>Saturday</option>
+        </select>
+      </div>
       <table>
         <tr>
           <th>Type</th>

diff --git a/src/sections/landing/schedule/schedule.ts b/src/sections/landing/schedule/schedule.ts
@@ -13,8 +13,8 @@ const newScheduleItem = (
 ): ScheduleItem => ({ type, time, name, location });
 
 export const FRIDAY_SCHEDULE: ScheduleItem[] = [
-  newScheduleItem('Notice', '8:30 AM - 9:30 AM', 'Check-in', 'SC Auditorium'),
-  newScheduleItem('Main Event', '9:30 AM - 10:15 AM', 'Opening Ceremony', 'SC Auditorium'),
+  newScheduleItem('Notice', '8:30 AM - 9:30 AM', 'Check-in', 'SDSC Auditorium'),
+  newScheduleItem('Main Event', '9:30 AM - 10:15 AM', 'Opening Ceremony', 'SDSC Auditorium'),
   newScheduleItem('Social', '10:30 AM - 11:00 AM', 'Team Formation', 'Warren Bear Lawn'),
   newScheduleItem('Notice', '11:00 AM', 'Hacking Starts!', 'CSE Basement'),
   newScheduleItem('Notice', '12:00 PM', 'Lunch Distribution', 'Multipurpose Room'),
@@ -33,9 +33,15 @@ export const FRIDAY_SCHEDULE: ScheduleItem[] = [
     'CSE 1202'
   ),
   newScheduleItem('Notice', '6:00 PM', 'Dinner Distribution', 'Multipurpose Room'),
+  newScheduleItem(
+    'Workshop',
+    '7:00 PM - 8:00 PM',
+    'Intro to Figma (hosted by ACM Design)',
+    'CSE 1202'
+  ),
   newScheduleItem(
     'Social',
-    '7:00 PM - 9:00 PM',
+    '8:00 PM - 9:00 PM',
     'Pirates of the Caribbean Watch Party',
     'CSE 1202'
   ),

diff --git a/src/sections/landing/schedule/style.module.scss b/src/sections/landing/schedule/style.module.scss
@@ -4,8 +4,28 @@
   flex-direction: column;
   gap: 2.5rem;
 
-  h2 {
-    font-size: 36px;
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    h2 {
+      font-size: 36px;
+    }
+
+    select {
+      padding: 0.625rem 1.5rem;
+      border: 0;
+      border-radius: 0.875rem;
+      font-family: inherit;
+      font-size: 1rem;
+      font-weight: 500;
+      border-right: 16px solid transparent;
+    }
+
+    select:focus {
+      outline: 0;
+    }
   }
 
   table {