Add closable performer lists

pages/program.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Program.module.scss';
+import { CSSTransition } from 'react-transition-group';
+import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
 interface DayToggles {
   wed: boolean;
@@ -43,12 +45,37 @@ const Program = () => {
         Café Laituri, Voiponlahdentie 37, Palva
       </span>
       <h3 className={styles.timeSpan}>17:00 - 19:00</h3>
-      <ul className={styles.performerList}>
-        <li>Rauhatäti</li>
-        <li>Otso Helasvuo</li>
-        <li>Katariina Vuorinen</li>
-        <li>Rosanna Fellman</li>
-      </ul>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('thu')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.thu ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.thu ? (
+          <ul className={styles.performerList}>
+            <li>Rauhatäti</li>
+            <li>Otso Helasvuo</li>
+            <li>Katariina Vuorinen</li>
+            <li>Rosanna Fellman</li>
+          </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
 
       {/* Perjantai */}
       <h2 className={styles.programTitle}>
@@ -63,11 +90,37 @@ const Program = () => {
         Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
       </span>
       <h3 className={styles.timeSpan}>18:00 - 21:00</h3>
-      <ul className={styles.performerList}>
-        <li>Ilmi Lupiini</li>
-        <li>Kasper Salonen</li>
-        <li>Juha Kulmala + Positroninen runo-orkesteri</li>
-      </ul>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('fri')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.fri ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.fri ? (
+          <ul className={styles.performerList}>
+            <li>Ilmi Lupiini</li>
+            <li>Kasper Salonen</li>
+            <li>Juha Kulmala + Positroninen runo-orkesteri</li>
+          </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
 
       {/* Lauantai */}
       <h2 className={styles.programTitle}>
@@ -82,65 +135,91 @@ const Program = () => {
         Sinervon talo, Sauniementie 5, Teersalo
       </span>
       <h3 className={styles.timeSpan}>14:00 - 20:00</h3>
-      <ul className={styles.performerList}>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>14:00</span>
-          <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>14:30</span>
-          <span className={styles.programPerformer}>Katja Meriluoto</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>14:50</span>
-          <span className={styles.programPerformer}>Marianna Kurtto</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>15:10</span>
-          <span className={styles.programPerformer}>
-            Esa Hirvonen & Masi Hukari
-          </span>
-        </li>
-        <li className={styles.programBreak}>Tauko</li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>16:00</span>
-          <span className={styles.programPerformer}>Veera Sylvius</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>16:20</span>
-          <span className={styles.programPerformer}>Suvi Valli</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>16:40</span>
-          <span className={styles.programPerformer}>
-            Sergio Augusto Sánchez
-          </span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>17:00</span>
-          <span className={styles.programPerformer}>Blues Ones</span>
-        </li>
-        <li className={styles.programBreak}>Tauko</li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>18:00</span>
-          <span className={styles.programPerformer}>Sirpa Kyyrönen</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>18:20</span>
-          <span className={styles.programPerformer}>Tomi Kontio</span>
-        </li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>18:40</span>
-          <span className={styles.programPerformer}>
-            Katariina Vuorinen & Kaisa Mäensivu
-          </span>
-        </li>
-        <li className={styles.programBreak}>Tauko</li>
-        <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>19:30</span>
-          <span className={styles.programPerformer}>Signe</span>
-        </li>
-      </ul>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('sat')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.sat ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.sat ? (
+          <ul className={styles.performerList}>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>14:00</span>
+              <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>14:30</span>
+              <span className={styles.programPerformer}>Katja Meriluoto</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>14:50</span>
+              <span className={styles.programPerformer}>Marianna Kurtto</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>15:10</span>
+              <span className={styles.programPerformer}>
+                Esa Hirvonen & Masi Hukari
+              </span>
+            </li>
+            <li className={styles.programBreak}>Tauko</li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>16:00</span>
+              <span className={styles.programPerformer}>Veera Sylvius</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>16:20</span>
+              <span className={styles.programPerformer}>Suvi Valli</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>16:40</span>
+              <span className={styles.programPerformer}>
+                Sergio Augusto Sánchez
+              </span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>17:00</span>
+              <span className={styles.programPerformer}>Blues Ones</span>
+            </li>
+            <li className={styles.programBreak}>Tauko</li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:00</span>
+              <span className={styles.programPerformer}>Sirpa Kyyrönen</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:20</span>
+              <span className={styles.programPerformer}>Tomi Kontio</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:40</span>
+              <span className={styles.programPerformer}>
+                Katariina Vuorinen & Kaisa Mäensivu
+              </span>
+            </li>
+            <li className={styles.programBreak}>Tauko</li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>19:30</span>
+              <span className={styles.programPerformer}>Signe</span>
+            </li>
+          </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
     </section>
   );
 };