WIP

pages/index.tsx

@@ -6,7 +6,7 @@ import styles from '../styles/Index.module.scss';
 import Lead from './components/Lead';
 import Collaboration from './components/Collaboration';
 import Workshops from './workshops';
-import Archive from './archive';
+import Archive from './arkisto';
 // import Workshops from './workshops';
 
 const Home: NextPage = () => {

pages/performers.tsx

@@ -89,7 +89,7 @@ const Performers = () => {
       ) : (
         <i>Lisätietoja tulossa myöhemmin...</i>
       )}
-      <Link href="/archive">
+      <Link href="/arkisto">
         <a>
           <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
           <FiExternalLink fontSize={20} />

pages/program.tsx

@@ -4,6 +4,9 @@ import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Program.module.scss';
 import { CSSTransition } from 'react-transition-group';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import Performer from '../types/Performer';
+import Image from 'next/image';
+import Link from 'next/link';
 
 interface DayToggles {
   wed: boolean;
@@ -12,55 +15,99 @@ interface DayToggles {
   sat: boolean;
 }
 
+const firstPerformers: Performer[] = [];
+const secondPerformers: Performer[] = [];
+
 const Program = () => {
+  const [firstPerformers] = useState([
+    { id: "ayras", name: "Äyräs", paragraphs: [] },
+    { id: "hanna_storm", name: "Hanna Storm", paragraphs: [] },
+    { id: "juha_rautio", name: "Juha Rautio", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Ilkka Turta", paragraphs: [] }]);
+
+  const [secondPerformers] = useState([
+    { id: "juha_kulmala", name: "Juha Kulmala + Positroninen runo-orkesteri", paragraphs: [] },
+    { id: "terhi_forssen", name: "Terhi Forssén", paragraphs: [] },
+    { id: "katariina_vuorinen", name: "Katariina Vuorinen & Björn", paragraphs: [] }]);
+
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
 
+      <div className={styles.eventContainer}>
         {/* Vaihela */}
-      <h2 className={styles.programTitle}>
+        <div className={styles.event}>
-        <span>7.6.</span>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>7.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
             <a href='https://www.cafelaituri.fi'>
               <span className={styles.placeName}>Vaihela</span>
               <FiExternalLink fontSize={20} />
             </a>
-        <span>pe</span>
           </h2>
-      <span className={styles.locationAddress}>
-        Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
-      </span>
-      <span className={styles.timeSpan}>18:00 - 21:00</span>
 
-      <ul className={styles.performerList}>
+          <div className={styles.performerList}>
-        <li>Äyräs</li>
+            {firstPerformers.map((p) => (
-        <li>Hanna Storm</li>
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
-        <li>Juha Rautio</li>
+                <Image
-        <li>Katariina Vuorinen<br />& Ilkka Turta</li>
+                  className={styles.performerImage}
-      </ul>
+                  src={'/performers/2024/' + p.id + '.jpg'}
+                  width={80}
+                  height={80}
+                  layout='fixed'
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
           <i>Ohjelma täydentyy...</i>
-      <hr className={styles.programHr} />
+        </div>
 
         {/* Laituri */}
-      <h2 className={styles.programTitle}>
+        <div className={styles.event}>
-        <span>14.6.</span>
+          <div className={styles.programTitle}>
+            <span className={styles.timeSpan}>pe</span>
+            <span className={styles.timeSpan}>14.6.</span>
+            <span className={styles.timeSpan}>18 - 21</span>
+          </div>
+          <h2>
             <a href='https://www.cafelaituri.fi'>
               <span className={styles.placeName}>Laituri</span>
               <FiExternalLink fontSize={20} />
             </a>
-        <span>pe</span>
           </h2>
-      <span className={styles.locationAddress}>
+          <div className={styles.performerList}>
-        Café Laituri, Voiponlahdentie 37, Palva
+            {secondPerformers.map((p) => (
-      </span>
+              <a href={'/esiintyjat/' + p.id} className={styles.performerCard}>
-      <span className={styles.timeSpan}>18:00 - 21:00</span>
+                <Image
-
+                  className={styles.performerImage}
-      <ul className={styles.performerList}>
+                  src={'/performers/2024/' + p.id + '.jpg'}
-        <li>Juha Kulmala + Positroninen runo-orkesteri </li>
+                  width={80}
-        <li>Terhi Forssén</li>
+                  height={80}
-        <li>Katariina Vuorinen & Björn</li>
+                  layout='fixed'
-      </ul>
+                  alt={p.name}
+                />
+                <span className={styles.performerName}>{p.name}</span>
+              </a>
+            ))}
+          </div>
+          <br />
+          <br />
           <i>Ohjelma täydentyy...</i>
-      <hr className={styles.programHr} />
+        </div>
+      </div>
+      <Link href="/arkisto">
+        <a>
+          <span className={styles.archiveLinkText}>Aiempien vuosien esiintyjiä</span>
+          <FiExternalLink fontSize={20} />
+        </a>
+      </Link>
     </section >
   );
 };

styles/Program.module.scss

@@ -22,7 +22,7 @@
 .programTitle {
   display: flex;
   align-items: baseline;
-  justify-content: space-evenly;
+  justify-content: space-between;
   width: 80%;
   max-width: 25rem;
   padding-left: 1.5rem;
@@ -54,16 +54,54 @@
 }
 
 .performerList {
-  font-size: 1.5rem;
+  display: flex;
-  font-weight: bold;
+  flex-wrap: wrap;
-  list-style-type: none;
+  gap: 2em;
-  line-height: 1.5rem;
+  justify-content: space-around;
-  max-width: 20rem;
+  margin-top: 3rem;
-  padding-left: 0;
+}
-  margin-top: 0;
 
-  li {
+.performerCard {
-    margin-top: 1em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-decoration: none;
+  color: #2f273e;
+
+  img {
+    border-radius: 50%;
+  }
+}
+
+.performerCard:hover {
+  color: rgb(117, 117, 117);
+  transition: color 0.3s;
+}
+
+.performerName {
+  max-width: 105px;
+  word-wrap: normal;
+}
+
+.eventContainer {
+  display: flex;  
+  gap: 4%;
+  margin-bottom: 2em;
+}
+
+.event {
+  min-width: 40%;
+  padding: 4%;
+  background-color: #e7e2f5;
+}
+
+@media screen and (max-width: 768px) {
+  .eventContainer {
+    flex-wrap: wrap;
+  }
+
+  .event {
+    margin-top: 2em;
   }
 }
 
@@ -125,3 +163,15 @@
   width: 43%;
   margin-top: 1em;
 }
+
+.archiveLink {
+  margin-top: 1rem;
+}
+
+.archiveLinkText {
+  font-size: 2.5rem;
+  margin-right: 1rem;
+  color: #2f273e;
+  text-decoration: none;
+  font-weight: bold;
+}