Updated to 2023

pages/performers.tsx

@@ -4,7 +4,7 @@ import styles from '../styles/Performers.module.scss';
 import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
-import PerformersData from '../data/performers/2022';
+import PerformersData from '../data/performers/2023';
 import { CSSTransition } from 'react-transition-group';
 
 interface PerformerCard extends Performer {
@@ -41,49 +41,53 @@ const Performers = () => {
   return (
     <section className={shared.page}>
       <h1>Esiintyjät</h1>
-      {performers.map((p) => (
-        <div className={styles.performerContainer} key={p.id}>
-          <Image
-            className={styles.performerImage}
-            src={p.imagePath}
-            width={100}
-            height={100}
-            layout='fixed'
-            alt={p.name + ' image'}
-          />
-          <div className={styles.performerTextContainer}>
-            <div
-              className={styles.performerTitle}
-              onClick={() => togglePerformerDesc(p.id)}
-            >
-              <h2>{p.name}</h2>
-              <button className={shared.openingChevron}>
+      {performers.length !== 0 ? (
+        performers.map((p) => (
+          <div className={styles.performerContainer} key={p.id}>
+            <Image
+              className={styles.performerImage}
+              src={p.imagePath}
+              width={100}
+              height={100}
+              layout='fixed'
+              alt={p.name + ' image'}
+            />
+            <div className={styles.performerTextContainer}>
+              <div
+                className={styles.performerTitle}
+                onClick={() => togglePerformerDesc(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 ? (
-                  <BiChevronDown size='3rem' />
+                  <div>
+                    {p.paragraphs.map((parag, index) => (
+                      <p key={index}>{parag.toString()}</p>
+                    ))}
+                  </div>
                 ) : (
-                  <BiChevronLeft size='3rem' />
+                  <span></span>
                 )}
-              </button>
+              </CSSTransition>
+              <hr />
             </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>
-      ))}
+        ))
+      ) : (
+        <i>Lisätietoja tulossa myöhemmin...</i>
+      )}
     </section>
   );
 };