104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import Image from 'next/image';
|
|
import { CSSTransition } from 'react-transition-group';
|
|
import shared from '../styles/Shared.module.scss';
|
|
import styles from '../styles/Archive.module.scss';
|
|
import PerformersData2021 from '../data/performers/2021';
|
|
import PerformersData2022 from '../data/performers/2022';
|
|
import PerformersData2023 from '../data/performers/2023';
|
|
import PerformersData2024 from '../data/performers/2024';
|
|
import PerformersData2025 from '../data/performers/2025';
|
|
import Performer from '../types/Performer';
|
|
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
|
|
|
|
interface PerformerCard extends Performer {
|
|
showDesc: boolean;
|
|
}
|
|
|
|
const dataByYear: Record<number, Performer[]> = {
|
|
2025: PerformersData2025,
|
|
2024: PerformersData2024,
|
|
2023: PerformersData2023,
|
|
2022: PerformersData2022,
|
|
2021: PerformersData2021,
|
|
};
|
|
|
|
const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);
|
|
|
|
const Archive = () => {
|
|
const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
|
|
|
|
useEffect(() => {
|
|
const initial: Record<number, PerformerCard[]> = {};
|
|
for (const year of sortedYears) {
|
|
initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
|
|
}
|
|
setPerformersByYear(initial);
|
|
}, []);
|
|
|
|
const togglePerformerDesc = (year: number, id: string) => {
|
|
setPerformersByYear((prev) => ({
|
|
...prev,
|
|
[year]: prev[year].map((p) =>
|
|
p.id === id ? { ...p, showDesc: !p.showDesc } : p
|
|
),
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<section className={shared.page + ' ' + styles.archivePage}>
|
|
<h1>Arkisto</h1>
|
|
{sortedYears.map((year) => (
|
|
<React.Fragment key={year}>
|
|
<h2 className={styles.year}>{year}</h2>
|
|
{(performersByYear[year] ?? []).map((p) => (
|
|
<div className={styles.performerContainer} key={p.id}>
|
|
<Image
|
|
className={styles.performerImage}
|
|
src={'/performers/' + year + '/' + p.id + '.jpg'}
|
|
width={100}
|
|
height={100}
|
|
layout='fixed'
|
|
alt={p.name}
|
|
/>
|
|
<div className={styles.performerTextContainer}>
|
|
<div
|
|
className={styles.performerTitle}
|
|
onClick={() => togglePerformerDesc(year, p.id)}
|
|
>
|
|
<h2>{p.name}</h2>
|
|
<button className={shared.openingChevron}>
|
|
{p.showDesc ? (
|
|
<BiChevronDown size='3rem' />
|
|
) : (
|
|
<BiChevronLeft size='3rem' />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<CSSTransition
|
|
in={p.showDesc}
|
|
timeout={1000}
|
|
classNames='fadeTransition'
|
|
>
|
|
{p.showDesc ? (
|
|
<div>
|
|
{p.paragraphs.map((parag, index) => (
|
|
<p key={index}>{parag.toString()}</p>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span></span>
|
|
)}
|
|
</CSSTransition>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Archive;
|