tietokonepaja/runosaari
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New program page

Browse Source
This commit is contained in:
veikko
2022-06-17 22:35:10 +03:00
parent b7ee46401d
commit 438a2d4c07
8 changed files with 225 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/archive.tsx
View File

@@ -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>

3
pages/info.tsx
View File

@@ -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>

9
pages/performers.tsx
View File

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

182
pages/program.tsx
View File

@@ -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'>
18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu rakastettuja
runoja Irja ja Veikko Aro-Heinilän kotipihalla (sateella sisällä).
<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='performance-paragraph'>Sydämellisesti tervetuloa!</p>
<p className='performance-paragraph'>
<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>
<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
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ä.
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 className={styles.programParag}>
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 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>
<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'>
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina Vuorinen, Aki
Salmela, Heidi Iivari ja Laura Laakso.
<p className={styles.programParag}>
Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
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,
basso), Ilkka Turta (kitara), Kimmo Laine (basso, koskettimet), Roberto
Lanz (rummut).
Ä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 className={styles.programParag}>
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'>
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 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='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>
);
};

9
styles/Performers.module.scss
View File

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

27
styles/Program.module.scss
View File

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

13
styles/Shared.module.scss Normal file
View File

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

5
styles/globals.scss
View File

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