51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
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 PerformersData from '../../data/performers/2024';
|
|
import Performer from '../../types/Performer';
|
|
import Image from 'next/image';
|
|
|
|
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 (
|
|
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 PerformerPage;
|