Performers page improved

pages/performers.tsx

@@ -1,16 +1,34 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../styles/Performers.module.scss';
 import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
-import performers2021 from '../data/performers/2021';
+import performers2021 from '../data/performers/2022';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
+interface PerformerCard extends Performer {
+  id: number;
+  showDesc: boolean;
+}
+
 const Performers = () => {
-  const [performers, setPerformers] = useState<Performer[]>(performers2021);
+  const [performers, setPerformers] = useState<PerformerCard[]>([]);
+
+  useEffect(() => {
+    let cards: PerformerCard[] = [];
+
+    performers2021.map((p, index) => {
+      let newCard = { ...p, id: index, showDesc: false };
+      cards.push(newCard);
+    });
+
+    return () => {
+      setPerformers(cards);
+    };
+  }, []);
 
   const togglePerformerDesc = (id: number) => {
-    let updated: Performer[];
+    let updated: PerformerCard[];
     updated = performers.map((p) => {
       if (p.id === id) {
         p.showDesc = !p.showDesc;
@@ -19,17 +37,17 @@ const Performers = () => {
     });
 
     setPerformers(updated);
+
+    console.log(performers);
   };
 
   return (
     <section className={shared.page}>
       <h1>Esiintyjät</h1>
-
+      {performers.map((p) => (
-      <div className={styles.performersContainer}>
+        <>
-        {performers2021.map((p) => (
-          <div className={styles.performerCard}>
           <div
-              className={styles.performerTitle}
+            className={styles.performerContainer}
             onClick={() => togglePerformerDesc(p.id)}
           >
             <Image
@@ -39,6 +57,8 @@ const Performers = () => {
               height={100}
               layout='fixed'
             />
+            <div className={styles.performerTextContainer}>
+              <div className={styles.performerTitle}>
                 <h2>{p.name}</h2>
                 <button className={shared.openingChevron}>
                   {p.showDesc ? (
@@ -57,9 +77,11 @@ const Performers = () => {
                   ))}
                 </>
               )}
+              <hr />
             </div>
+          </div>
+        </>
       ))}
-      </div>
     </section>
   );
 };

styles/Info.module.scss

@@ -3,14 +3,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   hr {
     border: 0.2rem solid #d5caf29d;
-    width: 60%;
+    width: 80%;
   }
 
   p {
-    width: 60%;
+    width: 80%;
   }
 }
 
@@ -18,11 +17,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 60%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
   cursor: pointer;
+  width: 80%;
 
   h2 {
     margin-right: 1rem;

styles/Performers.module.scss

@@ -1,14 +1,26 @@
-.performersContainer {
+.performerContainer {
   display: flex;
-  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 90%;
+
+  p {
+    padding-left: 1rem;
   }
 
-.performerCard {
+  hr {
-  display: flex;
+    border: 0.2rem solid #d5caf29d;
-  flex-direction: column;
+    width: 100%;
-  background-color: #d5caf29d;
+    margin-top: 2rem;
-  margin: 2rem;
+    margin-bottom: 2rem;
-  padding: 2rem;
+    width: 100%;
+  }
+}
+
+.performerTextContainer {
+  width: 80%;
+  margin-left: 1rem;
+  margin-top: 1rem;
 }
 
 .performerTitle {
@@ -16,6 +28,7 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  width: 100%;
 
   h2 {
     margin-left: 1rem;
@@ -28,9 +41,9 @@
 }
 
 .performerImage {
-  margin-right: 15rem;
   height: 100px;
   border-radius: 100%;
+  margin-bottom: 2rem;
 }
 
 .performerButton:hover {

styles/Program.module.scss

@@ -6,11 +6,11 @@
 
   hr {
     border: 0.2rem solid #d5caf29d;
-    width: 60%;
+    width: 80%;
   }
 
   p {
-    width: 60%;
+    width: 80%;
   }
 }
 
@@ -18,7 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 60%;
+  width: 80%;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;

styles/Shared.module.scss

@@ -1,8 +1,7 @@
 .openingChevron {
-  height: 3rem;
-  width: 3rem;
   background-color: transparent;
   border: transparent;
+  cursor: pointer;
 }
 
 .openingChevron:hover {

types/Performer.ts

@@ -1,9 +1,7 @@
 type Performer = {
-    id: number,
     name: string,
     paragraphs: Array<string>,
     imagePath: string,
-    showDesc: boolean
 }
 
 export default Performer;