From c9be2af52ed306b652399ba6092291861c02cf53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= Date: Sat, 25 May 2024 12:24:45 +0300 Subject: [PATCH] WIP --- pages/{archive.tsx => arkisto.tsx} | 0 pages/{performers => esiintyjat}/[id].tsx | 0 pages/index.tsx | 2 +- pages/performers.tsx | 2 +- pages/program.tsx | 133 +++++++++++++++------- pages/{safety.tsx => turvallisuus.tsx} | 0 styles/Program.module.scss | 70 ++++++++++-- 7 files changed, 152 insertions(+), 55 deletions(-) rename pages/{archive.tsx => arkisto.tsx} (100%) rename pages/{performers => esiintyjat}/[id].tsx (100%) rename pages/{safety.tsx => turvallisuus.tsx} (100%) diff --git a/pages/archive.tsx b/pages/arkisto.tsx similarity index 100% rename from pages/archive.tsx rename to pages/arkisto.tsx diff --git a/pages/performers/[id].tsx b/pages/esiintyjat/[id].tsx similarity index 100% rename from pages/performers/[id].tsx rename to pages/esiintyjat/[id].tsx diff --git a/pages/index.tsx b/pages/index.tsx index 50734dc..855a620 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,7 +6,7 @@ import styles from '../styles/Index.module.scss'; import Lead from './components/Lead'; import Collaboration from './components/Collaboration'; import Workshops from './workshops'; -import Archive from './archive'; +import Archive from './arkisto'; // import Workshops from './workshops'; const Home: NextPage = () => { diff --git a/pages/performers.tsx b/pages/performers.tsx index 3bbbcb2..ab08411 100644 --- a/pages/performers.tsx +++ b/pages/performers.tsx @@ -89,7 +89,7 @@ const Performers = () => { ) : ( Lisätietoja tulossa myöhemmin... )} - + Aiempien vuosien esiintyjiä diff --git a/pages/program.tsx b/pages/program.tsx index c478b71..a4be5d4 100644 --- a/pages/program.tsx +++ b/pages/program.tsx @@ -4,6 +4,9 @@ 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; @@ -12,56 +15,100 @@ interface DayToggles { 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 (

Ohjelma

- {/* Vaihela */} -

- 7.6. - - Vaihela +
+ {/* Vaihela */} +
+
+ pe + 7.6. + 18 - 21 +
+

+ + Vaihela + + +

+ +
+ {firstPerformers.map((p) => ( + + {p.name} + {p.name} + + ))} +
+
+
+ Ohjelma täydentyy... +
+ + {/* Laituri */} +
+
+ pe + 14.6. + 18 - 21 +
+

+ + Laituri + + +

+
+ {secondPerformers.map((p) => ( + + {p.name} + {p.name} + + ))} +
+
+
+ Ohjelma täydentyy... +
+
+ + + Aiempien vuosien esiintyjiä - pe -

- - Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa - - 18:00 - 21:00 - - - Ohjelma täydentyy... -
- - {/* Laituri */} -

- 14.6. - - Laituri - - - pe -

- - Café Laituri, Voiponlahdentie 37, Palva - - 18:00 - 21:00 - - - Ohjelma täydentyy... -
-
+ + ); }; diff --git a/pages/safety.tsx b/pages/turvallisuus.tsx similarity index 100% rename from pages/safety.tsx rename to pages/turvallisuus.tsx diff --git a/styles/Program.module.scss b/styles/Program.module.scss index 5a4ba95..ac6619a 100644 --- a/styles/Program.module.scss +++ b/styles/Program.module.scss @@ -22,7 +22,7 @@ .programTitle { display: flex; align-items: baseline; - justify-content: space-evenly; + justify-content: space-between; width: 80%; max-width: 25rem; padding-left: 1.5rem; @@ -54,16 +54,54 @@ } .performerList { - font-size: 1.5rem; - font-weight: bold; - list-style-type: none; - line-height: 1.5rem; - max-width: 20rem; - padding-left: 0; - margin-top: 0; + display: flex; + flex-wrap: wrap; + gap: 2em; + justify-content: space-around; + margin-top: 3rem; +} - li { - margin-top: 1em; +.performerCard { + display: flex; + align-items: center; + flex-direction: column; + text-decoration: none; + color: #2f273e; + + img { + border-radius: 50%; + } +} + +.performerCard:hover { + color: rgb(117, 117, 117); + transition: color 0.3s; +} + +.performerName { + max-width: 105px; + word-wrap: normal; +} + +.eventContainer { + display: flex; + gap: 4%; + margin-bottom: 2em; +} + +.event { + min-width: 40%; + padding: 4%; + background-color: #e7e2f5; +} + +@media screen and (max-width: 768px) { + .eventContainer { + flex-wrap: wrap; + } + + .event { + margin-top: 2em; } } @@ -124,4 +162,16 @@ border: 0.1rem solid #d5caf29d; width: 43%; margin-top: 1em; +} + +.archiveLink { + margin-top: 1rem; +} + +.archiveLinkText { + font-size: 2.5rem; + margin-right: 1rem; + color: #2f273e; + text-decoration: none; + font-weight: bold; } \ No newline at end of file