Rewrite in bun and vite away from NextJs

Co-authored-by: Copilot <copilot@github.com>
2026-04-29 22:07:58 +03:00
parent af7f23b9b5
commit 0d60dbbb5f
119 changed files with 714 additions and 302 deletions
--- a/src/pages/Archive.tsx
+++ b/src/pages/Archive.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import shared from '../../styles/Shared.module.scss';
+import styles from '../../styles/Archive.module.scss';
+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';
+
+interface PerformerCard extends Performer {
+  showDesc: boolean;
+}
+
+const dataByYear: Record<number, Performer[]> = {
+  2025: PerformersData2025,
+  2024: PerformersData2024,
+  2023: PerformersData2023,
+  2022: PerformersData2022,
+  2021: PerformersData2021,
+};
+
+const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);
+
+const Archive = () => {
+  const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
+
+  useEffect(() => {
+    const initial: Record<number, PerformerCard[]> = {};
+    for (const year of sortedYears) {
+      initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
+    }
+    setPerformersByYear(initial);
+  }, []);
+
+  const togglePerformerDesc = (year: number, id: string) => {
+    setPerformersByYear((prev) => ({
+      ...prev,
+      [year]: prev[year].map((p) =>
+        p.id === id ? { ...p, showDesc: !p.showDesc } : p
+      ),
+    }));
+  };
+
+  return (
+    <section className={shared.page + ' ' + styles.archivePage}>
+      <h1>Arkisto</h1>
+      {sortedYears.map((year) => (
+        <React.Fragment key={year}>
+          <h2 className={styles.year}>{year}</h2>
+          {(performersByYear[year] ?? []).map((p) => (
+            <div className={styles.performerContainer} key={p.id}>
+              <img
+                className={styles.performerImage}
+                src={'/performers/' + year + '/' + p.id + '.jpg'}
+                width={100}
+                height={100}
+                loading="lazy"
+                alt={p.name}
+              />
+              <div className={styles.performerTextContainer}>
+                <div
+                  className={styles.performerTitle}
+                  onClick={() => togglePerformerDesc(year, 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>
+          ))}
+        </React.Fragment>
+      ))}
+    </section>
+  );
+};
+
+export default Archive;