New program page

2022-06-17 22:35:10 +03:00
parent b7ee46401d
commit 438a2d4c07
8 changed files with 225 additions and 94 deletions
--- 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>
--- 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>
--- 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>
        ))}
--- 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>
  );
 };