Archive page

pages/archive.tsx

@@ -1,13 +1,90 @@
-import React from 'react';
+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 PerformersData from '../data/performers/2021';
+import Performer from '../types/Performer';
+import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+
+interface PerformerCard extends Performer {
+  id: number;
+  showDesc: boolean;
+}
 
 const Archive = () => {
+  const [performers, setPerformers] = useState<PerformerCard[]>([]);
+
+  useEffect(() => {
+    let cards: PerformerCard[] = [];
+
+    PerformersData.map((p, index) => {
+      let newCard = { ...p, id: index, showDesc: false };
+      cards.push(newCard);
+    });
+
+    setPerformers(cards);
+  }, []);
+
+  const togglePerformerDesc = (id: number) => {
+    let updated: PerformerCard[];
+    updated = performers.map((p) => {
+      if (p.id === id) {
+        p.showDesc = !p.showDesc;
+      }
+      return p;
+    });
+
+    setPerformers(updated);
+  };
+
   return (
     <section className={shared.page + ' ' + styles.archivePage}>
       <h1>Arkisto</h1>
-
-      <i>Lisätietoja tulossa myöhemmin!</i>
+      <h2 className={styles.year}>2021</h2>
+      {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 ? (
+                <div>
+                  {p.paragraphs.map((parag, index) => (
+                    <p key={index}>{parag.toString()}</p>
+                  ))}
+                </div>
+              ) : (
+                <span></span>
+              )}
+            </CSSTransition>
+            <hr />
+          </div>
+        </div>
+      ))}
     </section>
   );
 };

styles/Archive.module.scss

@@ -1,3 +1,77 @@
 .archivePage {
   margin-bottom: 4rem;
 }
+
+.year {
+  font-size: 3rem;
+  margin-bottom: 1em;
+}
+
+.performerContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 90%;
+
+  p {
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: 0.2rem solid #d5caf29d;
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 100%;
+  }
+}
+
+.performerTextContainer {
+  width: 80%;
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+
+.performerTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 100%;
+
+  h2 {
+    margin-left: 1rem;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+.performerImage {
+  height: 100px;
+  border-radius: 100%;
+  margin-bottom: 2rem;
+}
+
+.performerButton:hover {
+  svg {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .performerContainer {
+    flex-direction: column;
+    align-items: center;
+
+    hr {
+      margin-top: 0;
+    }
+  }
+  .performerTextContainer {
+    margin-left: -0.5rem;
+  }
+}