New program page

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>

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>

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>
         ))}

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>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('wed')}
+        >
           <h2>Keskiviikko 20.7.</h2>
-      <p className='performance-paragraph'>
+          <button className={shared.openingChevron}>
-        18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja
+            {dayToggles.wed ? (
-        runoja Irja ja Veikko Aro-Heinilän kotipihalla (sateella sisällä).
+              <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='performance-paragraph'>Sydämellisesti tervetuloa!</p>
+            <p className={styles.programParag}>Sydämellisesti tervetuloa!</p>
-      <p className='performance-paragraph'>
+            <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>
-      <p className='performance-paragraph'>
+          <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
+              kokoonpanon, joka on saanut kolmannen kiinnityksen
-        Willi Kansa -katselmuksessa marraskuussa 2021 Irja ja Veikko
+              kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
-        Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää kuullaan Irja
+              Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
-        Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja Laurin esittäminä.
+              kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
+              Laurin esittäminä.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
-        17-19 Runollinen, musiikillinen ja merellinen matinea Cafe Laiturissa.
+              17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
-        Esiintymässä mm. Anja Erämaja.
+              Laiturissa. Esiintymässä mm. Anja Erämaja.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
-        Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, Voiponlahdentie
+              Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
-        37, Palva
+              Voiponlahdentie 37, Palva
             </p>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.dayContainer}>
+        <div
+          className={styles.programTitle}
+          onClick={() => toggleDayDesc('fri')}
+        >
           <h2>Perjantai 22.7.</h2>
-      <p className='performance-paragraph'>
+          <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='performance-paragraph'>
+            <p className={styles.programParag}>
               Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
               viestintäkonsultti Laura Rantanen.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
               14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
               puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
-        Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki
+              Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
-        Salmela, Heidi Iivari ja Laura Laakso.
+              Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
               Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
-        Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, kitara,
+              Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
-        basso), Ilkka Turta (kitara), Kimmo Laine (basso, koskettimet), Roberto
+              kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
-        Lanz (rummut).
+              koskettimet), Roberto Lanz (rummut).
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
-        Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen tori.
+              Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
+              tori.
             </p>
-      <p className='performance-paragraph'>
+            <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>
-      <p className='performance-paragraph'>
+          <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='performance-paragraph'>
+            <p className={styles.programParag}>
-        Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat luomiinsa
+              Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
-        maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii myös nauttimaan
+              luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
-        lounasta, juttelemaan muiden festarikävijöiden kanssa ja ihailemaan
+              myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
-        ympäröivää luontoa.
+              kanssa ja ihailemaan ympäröivää luontoa.
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
               Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
               (luuttu).
             </p>
-      <p className='performance-paragraph'>
+            <p className={styles.programParag}>
               Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
             </p>
+          </>
+        )}
+        <hr />
+      </div>
     </section>
   );
 };

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);

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;
+  }
+}

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%;
+}

styles/globals.scss

@@ -23,11 +23,6 @@ main {
   justify-content: center;
 }
 
-.page {
-  text-align: center;
-  margin-bottom: 8rem;
-}
-
 h1 {
   font-size: 5rem;
 }