116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { FiExternalLink } from 'react-icons/fi';
|
|
import shared from '../styles/Shared.module.scss';
|
|
import styles from '../styles/Program.module.scss';
|
|
import { CSSTransition } from 'react-transition-group';
|
|
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
|
|
import Performer from '../types/Performer';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
interface DayToggles {
|
|
wed: boolean;
|
|
thu: boolean;
|
|
fri: boolean;
|
|
sat: boolean;
|
|
}
|
|
|
|
const firstPerformers: Performer[] = [];
|
|
const secondPerformers: Performer[] = [];
|
|
|
|
const Program = () => {
|
|
const [firstPerformers] = useState([
|
|
{ id: "ayras", name: "Äyräs", paragraphs: [] },
|
|
{ id: "hanna_storm", name: "Hanna Storm", paragraphs: [] },
|
|
{ id: "juha_rautio", name: "Juha Rautio", paragraphs: [] },
|
|
{ id: "katariina_vuorinen", name: "Katariina Vuorinen & Ilkka Turta", paragraphs: [] }]);
|
|
|
|
const [secondPerformers] = useState([
|
|
{ id: "juha_kulmala", name: "Juha Kulmala + Positroninen runo-orkesteri", paragraphs: [] },
|
|
{ id: "terhi_forssen", name: "Terhi Forssén", paragraphs: [] },
|
|
{ id: "katariina_vuorinen", name: "Katariina Vuorinen & Björn", paragraphs: [] }]);
|
|
|
|
return (
|
|
<section className={shared.page}>
|
|
<h1 id='program-start'>Ohjelma</h1>
|
|
|
|
<div className={styles.eventContainer}>
|
|
{/* Vaihela */}
|
|
<div className={styles.event}>
|
|
<div className={styles.programTitle}>
|
|
<span className={styles.timeSpan}>pe</span>
|
|
<span className={styles.timeSpan}>7.6.</span>
|
|
<span className={styles.timeSpan}>18 - 21</span>
|
|
</div>
|
|
<h2>
|
|
<a href='https://www.cafelaituri.fi'>
|
|
<span className={styles.placeName}>Vaihela</span>
|
|
<FiExternalLink fontSize={20} />
|
|
</a>
|
|
</h2>
|
|
|
|
<div className={styles.performerList}>
|
|
{firstPerformers.map((p) => (
|
|
<a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
|
|
<Image
|
|
className={styles.performerImage}
|
|
src={'/performers/2024/' + p.id + '.jpg'}
|
|
width={80}
|
|
height={80}
|
|
layout='fixed'
|
|
alt={p.name}
|
|
/>
|
|
<span className={styles.performerName}>{p.name}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<i>Ohjelma täydentyy...</i>
|
|
</div>
|
|
|
|
{/* Laituri */}
|
|
<div className={styles.event}>
|
|
<div className={styles.programTitle}>
|
|
<span className={styles.timeSpan}>pe</span>
|
|
<span className={styles.timeSpan}>14.6.</span>
|
|
<span className={styles.timeSpan}>18 - 21</span>
|
|
</div>
|
|
<h2>
|
|
<a href='https://www.cafelaituri.fi'>
|
|
<span className={styles.placeName}>Laituri</span>
|
|
<FiExternalLink fontSize={20} />
|
|
</a>
|
|
</h2>
|
|
<div className={styles.performerList}>
|
|
{secondPerformers.map((p) => (
|
|
<a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
|
|
<Image
|
|
className={styles.performerImage}
|
|
src={'/performers/2024/' + p.id + '.jpg'}
|
|
width={80}
|
|
height={80}
|
|
layout='fixed'
|
|
alt={p.name}
|
|
/>
|
|
<span className={styles.performerName}>{p.name}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<i>Ohjelma täydentyy...</i>
|
|
</div>
|
|
</div>
|
|
<Link href="/arkisto">
|
|
<a>
|
|
<span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
|
|
<FiExternalLink fontSize={20} />
|
|
</a>
|
|
</Link>
|
|
</section >
|
|
);
|
|
};
|
|
|
|
export default Program;
|