From 438a2d4c0734aba1e99b50f77e77cbe2bf3e8e21 Mon Sep 17 00:00:00 2001
From: veikko <veikko@lintujarvi.fi>
Date: Fri, 17 Jun 2022 22:35:10 +0300
Subject: [PATCH] New program page

---
 pages/archive.tsx             |   3 +-
 pages/info.tsx                |   3 +-
 pages/performers.tsx          |   9 +-
 pages/program.tsx             | 250 ++++++++++++++++++++++++----------
 styles/Performers.module.scss |   9 --
 styles/Program.module.scss    |  27 ++++
 styles/Shared.module.scss     |  13 ++
 styles/globals.scss           |   5 -
 8 files changed, 225 insertions(+), 94 deletions(-)
 create mode 100644 styles/Shared.module.scss

diff --git a/pages/archive.tsx b/pages/archive.tsx
index 7780140..c18cc9a 100644
--- a/pages/archive.tsx
+++ b/pages/archive.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import shared from '../styles/Shared.module.scss';
 
 const Archive = () => {
   return (
-    <section className='page'>
+    <section className={shared.page}>
       <h1>Arkisto</h1>
 
       <i>Lisätietoja tulossa myöhemmin!</i>
diff --git a/pages/info.tsx b/pages/info.tsx
index 0e21e62..09c7d81 100644
--- a/pages/info.tsx
+++ b/pages/info.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import shared from '../styles/Shared.module.scss';
 
 const Info = () => {
   return (
-    <section className='page'>
+    <section className={shared.page}>
       <h1>Info</h1>
 
       <i>Lisätietoja tulossa myöhemmin!</i>
diff --git a/pages/performers.tsx b/pages/performers.tsx
index 3bda76a..90e7274 100644
--- a/pages/performers.tsx
+++ b/pages/performers.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import React, { useState } from 'react';
 import styles from '../styles/Performers.module.scss';
+import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
 import performers2021 from '../data/performers/2021';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
@@ -21,7 +22,7 @@ const Performers = () => {
   };
 
   return (
-    <section className='page'>
+    <section className={shared.page}>
       <h1>Esiintyjät</h1>
 
       <div className={styles.performersContainer}>
@@ -39,7 +40,7 @@ const Performers = () => {
                 layout='fixed'
               />
               <h2>{p.name}</h2>
-              <button className={styles.performerButton}>
+              <button className={shared.openingChevron}>
                 {p.showDesc ? (
                   <BiChevronDown size='3rem' />
                 ) : (
@@ -47,7 +48,7 @@ const Performers = () => {
                 )}
               </button>
             </div>
-            {p.showDesc ? (
+            {p.showDesc && (
               <>
                 {p.paragraphs.map((parag) => (
                   <p className={styles.performerDescription}>
@@ -55,8 +56,6 @@ const Performers = () => {
                   </p>
                 ))}
               </>
-            ) : (
-              <></>
             )}
           </div>
         ))}
diff --git a/pages/program.tsx b/pages/program.tsx
index de7bf90..19c10a4 100644
--- a/pages/program.tsx
+++ b/pages/program.tsx
@@ -1,81 +1,185 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import styles from '../styles/Program.module.scss';
+import shared from '../styles/Shared.module.scss';
+
+interface DayToggles {
+  wed: boolean;
+  thu: boolean;
+  fri: boolean;
+  sat: boolean;
+}
 
 const Program = () => {
+  const [dayToggles, setDayToggles] = useState<DayToggles>({
+    wed: false,
+    thu: false,
+    fri: false,
+    sat: false,
+  });
+
+  const toggleDayDesc = (day: keyof DayToggles) => {
+    let updated = { ...dayToggles };
+
+    updated[day] = !updated[day];
+
+    setDayToggles(updated);
+  };
+
   return (
-    <section className='page'>
+    <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
       <i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
-      <h2>Keskiviikko 20.7.</h2>
-      <p className='performance-paragraph'>
-        18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja
-        runoja Irja ja Veikko Aro-Heinilän kotipihalla (sateella sisällä).
-      </p>
-      <p className='performance-paragraph'>Sydämellisesti tervetuloa!</p>
-      <p className='performance-paragraph'>
-        Paikka: Huhtakarintie 24, Livonsaari
-      </p>
-      <h2>Torstai 21.7.</h2>
-      <p className='performance-paragraph'>
-        14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
-        kokoonpanon, joka on saanut kolmannen kiinnityksen kiertopalkintoon
-        Willi Kansa -katselmuksessa marraskuussa 2021 Irja ja Veikko
-        Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää kuullaan Irja
-        Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja Laurin esittäminä.
-      </p>
-      <p className='performance-paragraph'>
-        17-19 Runollinen, musiikillinen ja merellinen matinea Cafe Laiturissa.
-        Esiintymässä mm. Anja Erämaja.
-      </p>
-      <p className='performance-paragraph'>
-        Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, Voiponlahdentie
-        37, Palva
-      </p>
-      <h2>Perjantai 22.7.</h2>
-      <p className='performance-paragraph'>
-        11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
-      </p>
-      <p className='performance-paragraph'>
-        Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
-        viestintäkonsultti Laura Rantanen.
-      </p>
-      <p className='performance-paragraph'>
-        14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
-        puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
-      </p>
-      <p className='performance-paragraph'>
-        Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki
-        Salmela, Heidi Iivari ja Laura Laakso.
-      </p>
-      <p className='performance-paragraph'>
-        Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
-        Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, kitara,
-        basso), Ilkka Turta (kitara), Kimmo Laine (basso, koskettimet), Roberto
-        Lanz (rummut).
-      </p>
-      <p className='performance-paragraph'>
-        Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen tori.
-      </p>
-      <p className='performance-paragraph'>
-        Paikka: Sinervon talo, Sauniementie 5, Teersalo
-      </p>
-      <h2>Lauantai 23.7.</h2>
-      <p className='performance-paragraph'>
-        13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
-        äärelle.
-      </p>
-      <p className='performance-paragraph'>
-        Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat luomiinsa
-        maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii myös nauttimaan
-        lounasta, juttelemaan muiden festarikävijöiden kanssa ja ihailemaan
-        ympäröivää luontoa.
-      </p>
-      <p className='performance-paragraph'>
-        Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
-        (luuttu).
-      </p>
-      <p className='performance-paragraph'>
-        Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
-      </p>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('wed')}
+        >
+          <h2>Keskiviikko 20.7.</h2>
+          <button className={shared.openingChevron}>
+            {dayToggles.wed ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {dayToggles.wed && (
+          <>
+            <p className={styles.programParag}>
+              18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
+              rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
+              (sateella sisällä).
+            </p>
+            <p className={styles.programParag}>Sydämellisesti tervetuloa!</p>
+            <p className={styles.programParag}>
+              Paikka: Huhtakarintie 24, Livonsaari
+            </p>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('thu')}
+        >
+          <h2>Torstai 21.7.</h2>
+          <button className={shared.openingChevron}>
+            {dayToggles.thu ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {dayToggles.thu && (
+          <>
+            <p className={styles.programParag}>
+              14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
+              kokoonpanon, joka on saanut kolmannen kiinnityksen
+              kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
+              Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
+              kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
+              Laurin esittäminä.
+            </p>
+            <p className={styles.programParag}>
+              17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
+              Laiturissa. Esiintymässä mm. Anja Erämaja.
+            </p>
+            <p className={styles.programParag}>
+              Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
+              Voiponlahdentie 37, Palva
+            </p>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('fri')}
+        >
+          <h2>Perjantai 22.7.</h2>
+          <button className={shared.openingChevron}>
+            {dayToggles.fri ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {dayToggles.fri && (
+          <>
+            <p className={styles.programParag}>
+              11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
+            </p>
+            <p className={styles.programParag}>
+              Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
+              viestintäkonsultti Laura Rantanen.
+            </p>
+            <p className={styles.programParag}>
+              14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
+              puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
+            </p>
+            <p className={styles.programParag}>
+              Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
+              Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
+            </p>
+            <p className={styles.programParag}>
+              Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
+              Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
+              kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
+              koskettimet), Roberto Lanz (rummut).
+            </p>
+            <p className={styles.programParag}>
+              Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
+              tori.
+            </p>
+            <p className={styles.programParag}>
+              Paikka: Sinervon talo, Sauniementie 5, Teersalo
+            </p>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('sat')}
+        >
+          <h2>Lauantai 23.7.</h2>
+          <button className={shared.openingChevron}>
+            {dayToggles.sat ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {dayToggles.sat && (
+          <>
+            <p className={styles.programParag}>
+              13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
+              äärelle.
+            </p>
+            <p className={styles.programParag}>
+              Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
+              luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
+              myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
+              kanssa ja ihailemaan ympäröivää luontoa.
+            </p>
+            <p className={styles.programParag}>
+              Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
+              (luuttu).
+            </p>
+            <p className={styles.programParag}>
+              Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
+            </p>
+          </>
+        )}
+        <hr />
+      </div>
     </section>
   );
 };
diff --git a/styles/Performers.module.scss b/styles/Performers.module.scss
index 8b37e55..69da961 100644
--- a/styles/Performers.module.scss
+++ b/styles/Performers.module.scss
@@ -1,8 +1,6 @@
 .performersContainer {
   display: flex;
   flex-direction: column;
-  width: 47rem;
-  max-width: 100%;
 }
 
 .performerCard {
@@ -35,13 +33,6 @@
   border-radius: 100%;
 }
 
-.performerButton {
-  height: 3rem;
-  width: 3rem;
-  background-color: transparent;
-  border: transparent;
-}
-
 .performerButton:hover {
   svg {
     color: rgb(117, 117, 117);
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index e69de29..60e287c 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -0,0 +1,27 @@
+.dayContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  hr {
+    border: 0.2rem solid #d5caf29d;
+    width: 60%;
+  }
+}
+
+.programParag {
+  width: 60%;
+}
+
+.programTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 60%;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  margin-top: 1.5rem;
+  h2 {
+    margin-right: 1rem;
+  }
+}
diff --git a/styles/Shared.module.scss b/styles/Shared.module.scss
new file mode 100644
index 0000000..10848c7
--- /dev/null
+++ b/styles/Shared.module.scss
@@ -0,0 +1,13 @@
+.openingChevron {
+  height: 3rem;
+  width: 3rem;
+  background-color: transparent;
+  border: transparent;
+}
+
+.page {
+  text-align: center;
+  margin-bottom: 8rem;
+  width: 47rem;
+  max-width: 100%;
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 7ac64c2..120e97c 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -23,11 +23,6 @@ main {
   justify-content: center;
 }
 
-.page {
-  text-align: center;
-  margin-bottom: 8rem;
-}
-
 h1 {
   font-size: 5rem;
 }