From 8f57fc8456e55676729282941e87545ff72f4a99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Mon, 20 May 2024 19:18:32 +0300
Subject: [PATCH] New single performer page

---
 pages/performers/[id].tsx    | 49 +++++++++++++++++++++++++++++++-----
 styles/Performer.module.scss |  7 ++++++
 types/Performer.ts           |  2 +-
 3 files changed, 51 insertions(+), 7 deletions(-)
 create mode 100644 styles/Performer.module.scss

diff --git a/pages/performers/[id].tsx b/pages/performers/[id].tsx
index 96839df..4ced023 100644
--- a/pages/performers/[id].tsx
+++ b/pages/performers/[id].tsx
@@ -1,13 +1,50 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router'
-import shared from '../styles/Shared.module.scss';
-import styles from '../styles/Performer.module.scss';
+import shared from '../../styles/Shared.module.scss';
+import styles from '../../styles/Performer.module.scss';
+import PerformersData from '../../data/performers/2024';
+import Performer from '../../types/Performer';
+import Image from 'next/image';
 
-const Performer = () => {
+const PerformerPage = () => {
     const router = useRouter()
+
+    const [performer, setPerformer] = useState<Performer>({
+        name: '',
+        paragraphs: [],
+        id: ''
+    });
+
+    useEffect(() => {
+        setPerformer(PerformersData.find(p => p.id === router.query.id) ?? {
+            name: '',
+            paragraphs: [],
+            id: ''
+        });
+    }, [router.query.id])
+
     return (
-        <div>{router.query.name}</div>
+        performer.name == '' ?
+            (<div>Esiintyjää tunnisteella "{router.query.id}" ei löydy.</div>)
+            : (
+                <div className={styles.performerContainer}>
+                    <Image
+                        className={styles.performerImage}
+                        src={'/performers/2024/' + performer.id + '.jpg'}
+                        width={300}
+                        height={300}
+                        layout='fixed'
+                        alt={performer.name}
+                    />
+                    <h2>{performer.name}</h2>
+                    <div>
+                        {performer.paragraphs.map((parag, index) => (
+                            <p key={index}>{parag.toString()}</p>
+                        ))}
+                    </div>
+                </div>
+            )
     );
 }
 
-export default Performer;
+export default PerformerPage;
diff --git a/styles/Performer.module.scss b/styles/Performer.module.scss
new file mode 100644
index 0000000..b5fb388
--- /dev/null
+++ b/styles/Performer.module.scss
@@ -0,0 +1,7 @@
+.performerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 27%;
+}
\ No newline at end of file
diff --git a/types/Performer.ts b/types/Performer.ts
index 97308c0..2a178bf 100644
--- a/types/Performer.ts
+++ b/types/Performer.ts
@@ -1,7 +1,7 @@
 type Performer = {
     name: string,
     paragraphs: Array<string>,
-    imagePath: string,
+    id: string,
 }
 
 export default Performer;
\ No newline at end of file