Blank page for year 2026

pages/archive.tsx

@@ -7,6 +7,7 @@ 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';
 
@@ -19,6 +20,7 @@ const Archive = () => {
   const [performers2022, setPerformers2022] = useState<PerformerCard[]>([]);
   const [performers2023, setPerformers2023] = useState<PerformerCard[]>([]);
   const [performers2024, setPerformers2024] = useState<PerformerCard[]>([]);
+  const [performers2025, setPerformers2025] = useState<PerformerCard[]>([]);
 
   useEffect(() => {
     let cards: PerformerCard[] = [];
@@ -64,6 +66,17 @@ const Archive = () => {
     setPerformers2024(cards);
   }, []);
 
+  useEffect(() => {
+    let cards: PerformerCard[] = [];
+
+    PerformersData2025.map((p) => {
+      let newCard = { ...p, showDesc: false };
+      cards.push(newCard);
+    });
+
+    setPerformers2025(cards);
+  }, []);
+
   const togglePerformerDesc2021 = (id: string) => {
     let updated: PerformerCard[];
     updated = performers2021.map((p) => {
@@ -112,9 +125,65 @@ const Archive = () => {
     setPerformers2024(updated);
   };
 
+  const togglePerformerDesc2025 = (id: string) => {
+    let updated: PerformerCard[];
+    updated = performers2025.map((p) => {
+      if (p.id === id) {
+        p.showDesc = !p.showDesc;
+      }
+      return p;
+    });
+
+    setPerformers2025(updated);
+  }
+
   return (
     <section className={shared.page + ' ' + styles.archivePage}>
       <h1>Arkisto</h1>
+      <h2 className={styles.year}>2025</h2>
+      {performers2025.map((p) => (
+        <div className={styles.performerContainer} key={p.id}>
+          <Image
+            className={styles.performerImage}
+            src={'/performers/2025/' + p.id + '.jpg'}
+            width={100}
+            height={100}
+            layout='fixed'
+            alt={p.name}
+          />
+          <div className={styles.performerTextContainer}>
+            <div
+              className={styles.performerTitle}
+              onClick={() => togglePerformerDesc2025(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>
+      ))}
       <h2 className={styles.year}>2024</h2>
       {performers2024.map((p) => (
         <div className={styles.performerContainer} key={p.id}>