New info page

pages/info.tsx

@@ -1,12 +1,156 @@
-import React from 'react';
+import React, { useState } from 'react';
 import shared from '../styles/Shared.module.scss';
+import styles from '../styles/Info.module.scss';
+import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+
+interface InfoToggles {
+  shop: boolean;
+  bus: boolean;
+  accom: boolean;
+  ferry: boolean;
+  fb: boolean;
+}
 
 const Info = () => {
+  const [infoToggles, setInfoToggles] = useState<InfoToggles>({
+    shop: false,
+    bus: false,
+    accom: false,
+    ferry: false,
+    fb: false,
+  });
+
+  const toggleInfo = (info: keyof InfoToggles) => {
+    let updated = { ...infoToggles };
+    updated[info] = !updated[info];
+    setInfoToggles(updated);
+  };
+
   return (
     <section className={shared.page}>
       <h1>Info</h1>
 
       <i>Lisätietoja tulossa myöhemmin!</i>
+      <div className={styles.infoContainer}>
+        <div className={styles.infoTitle} onClick={() => toggleInfo('shop')}>
+          <h2>Livonsaaren Osuuskauppa</h2>
+          <button className={shared.openingChevron}>
+            {infoToggles.shop ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {infoToggles.shop && (
+          <>
+            <p>
+              Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
+              baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
+              käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista
+              esim. mahdollisia kirjaostoksia varten.
+            </p>
+            <a href='https://https//livonsaarenosuuskauppa.fi/'>
+              Kaupan kotisivut
+            </a>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.infoContainer}>
+        <div className={styles.infoTitle} onClick={() => toggleInfo('bus')}>
+          <h2>Bussiaikataulut</h2>
+          <button className={shared.openingChevron}>
+            {infoToggles.bus ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {infoToggles.bus && (
+          <>
+            <p>
+              Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
+              17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali
+              alueelle.
+            </p>
+            <a href='https://https//www.foli.fi/fi'>
+              Paikallisliikenteen bussiaikataulut
+            </a>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.infoContainer}>
+        <div className={styles.infoTitle} onClick={() => toggleInfo('accom')}>
+          <h2>Majoitus</h2>
+          <button className={shared.openingChevron}>
+            {infoToggles.accom ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {infoToggles.accom && (
+          <>
+            <p>
+              Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
+              (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
+            </p>
+            <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
+            <a href='https://www.livonsaarencaravan.fi/'>Livonsaari Caravan</a>
+            <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.infoContainer}>
+        <div className={styles.infoTitle} onClick={() => toggleInfo('ferry')}>
+          <h2>Lossiyhteydet</h2>
+          <button className={shared.openingChevron}>
+            {infoToggles.ferry ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {infoToggles.ferry && (
+          <>
+            <p>
+              Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
+              (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
+              julkista tieverkostoa eli maksuton.)
+            </p>
+            <a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
+              Aikataulut Palvaan ja Velkuanmaahan
+            </a>
+          </>
+        )}
+        <hr />
+      </div>
+      <div className={styles.infoContainer}>
+        <div className={styles.infoTitle} onClick={() => toggleInfo('fb')}>
+          <h2>Facebook</h2>
+          <button className={shared.openingChevron}>
+            {infoToggles.fb ? (
+              <BiChevronDown size='3rem' />
+            ) : (
+              <BiChevronLeft size='3rem' />
+            )}
+          </button>
+        </div>
+        {infoToggles.fb && (
+          <>
+            <a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
+              Tapahtuman facebook-sivut
+            </a>
+          </>
+        )}
+        <hr />
+      </div>
     </section>
   );
 };

pages/program.tsx

@@ -46,15 +46,13 @@ const Program = () => {
         </div>
         {dayToggles.wed && (
           <>
-            <p className={styles.programParag}>
+            <p>
               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>Sydämellisesti tervetuloa!</p>
-            <p className={styles.programParag}>
+            <p>Paikka: Huhtakarintie 24, Livonsaari</p>
-              Paikka: Huhtakarintie 24, Livonsaari
-            </p>
           </>
         )}
         <hr />
@@ -75,7 +73,7 @@ const Program = () => {
         </div>
         {dayToggles.thu && (
           <>
-            <p className={styles.programParag}>
+            <p>
               14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
               kokoonpanon, joka on saanut kolmannen kiinnityksen
               kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
@@ -83,11 +81,11 @@ const Program = () => {
               kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
               Laurin esittäminä.
             </p>
-            <p className={styles.programParag}>
+            <p>
               17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
               Laiturissa. Esiintymässä mm. Anja Erämaja.
             </p>
-            <p className={styles.programParag}>
+            <p>
               Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
               Voiponlahdentie 37, Palva
             </p>
@@ -111,34 +109,32 @@ const Program = () => {
         </div>
         {dayToggles.fri && (
           <>
-            <p className={styles.programParag}>
+            <p>
               11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
             </p>
-            <p className={styles.programParag}>
+            <p>
               Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
               viestintäkonsultti Laura Rantanen.
             </p>
-            <p className={styles.programParag}>
+            <p>
               14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
               puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
             </p>
-            <p className={styles.programParag}>
+            <p>
               Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
               Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
             </p>
-            <p className={styles.programParag}>
+            <p>
               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}>
+            <p>
               Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
               tori.
             </p>
-            <p className={styles.programParag}>
+            <p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
-              Paikka: Sinervon talo, Sauniementie 5, Teersalo
-            </p>
           </>
         )}
         <hr />
@@ -159,21 +155,21 @@ const Program = () => {
         </div>
         {dayToggles.sat && (
           <>
-            <p className={styles.programParag}>
+            <p>
               13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
               äärelle.
             </p>
-            <p className={styles.programParag}>
+            <p>
               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}>
+            <p>
               Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
               (luuttu).
             </p>
-            <p className={styles.programParag}>
+            <p>
               Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
             </p>
           </>

styles/Info.module.scss

@@ -0,0 +1,35 @@
+.infoContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  hr {
+    border: 0.2rem solid #d5caf29d;
+    width: 60%;
+  }
+
+  p {
+    width: 60%;
+  }
+}
+
+.infoTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 60%;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  margin-top: 1.5rem;
+  cursor: pointer;
+
+  h2 {
+    margin-right: 1rem;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}

styles/Program.module.scss

@@ -3,14 +3,15 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
   hr {
     border: 0.2rem solid #d5caf29d;
     width: 60%;
   }
-}
 
-.programParag {
+  p {
     width: 60%;
+  }
 }
 
 .programTitle {
@@ -21,7 +22,14 @@
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
+  cursor: pointer;
+
   h2 {
     margin-right: 1rem;
   }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
 }

styles/Shared.module.scss

@@ -5,6 +5,13 @@
   border: transparent;
 }
 
+.openingChevron:hover {
+  svg {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
 .page {
   text-align: center;
   margin-bottom: 8rem;