💫 Add images for all harp pages (#74)

* 🍱 Add new harfen/index images

* 💄 Add css styles to fix image size and resize svgs
xiaolin/react-image-gallery#456

* Remove placeholder images from ImageSlider component

* 💄 Fix fullscreen mode

* Remove old harfen/index images

* ✨ Add function which shuffles harp images on pageload

* Add images for isabeau harp

* Fix linter errors

* Add new images

* Add new harp images for all harp pages

* Change coyright in Footer

src/components/footer/Footer.tsx

@@ -5,7 +5,7 @@ function Footer() {
   return (
     <footer className="grid place-items-center mt-20 mb-5">
       <p className="border-t border-moritzGrey px-5 md:px-20 pt-1 font-light text-sm">
-        © 2021 | Moritz Dortmund |{" "}
+        © 2022 | Moritz Dortmund |{" "}
         <Link
           className="border-b-2 border-opacity-0 border-highlight hover:border-opacity-100 transition ease-in-out duration-300"
           to="/kontakt"

src/components/imageslider/ImageSlider.tsx

@@ -4,28 +4,13 @@ import "react-image-gallery/styles/css/image-gallery.css";
 import "../../css/ImageSlider.css";
 
 export type ImageSliderProps = {
-  images?: ReactImageGalleryItem[];
+  images: ReactImageGalleryItem[];
 };
 
 function ImageSlider({ images }: ImageSliderProps) {
-  const placeholderImages = [
-    {
-      original: "https://picsum.photos/id/1018/1000/600/",
-      thumbnail: "https://picsum.photos/id/1018/250/150/",
-    },
-    {
-      original: "https://picsum.photos/id/1015/1000/600/",
-      thumbnail: "https://picsum.photos/id/1015/250/150/",
-    },
-    {
-      original: "https://picsum.photos/id/1019/1000/600/",
-      thumbnail: "https://picsum.photos/id/1019/250/150/",
-    },
-  ];
-
   return (
     <ImageGallery
-      items={images ? images : placeholderImages}
+      items={images}
       showPlayButton={false}
       showNav={true}
       showBullets={true}

src/css/ImageSlider.css

@@ -14,3 +14,28 @@
 .image-gallery-icon:hover {
   color: #ff4d2f;
 }
+
+/* Targets arrows */
+.image-gallery-left-nav .image-gallery-svg,
+.image-gallery-right-nav .image-gallery-svg {
+  height: 70px;
+}
+
+/* Targets fullscreen button */
+.image-gallery-fullscreen-button .image-gallery-svg,
+.image-gallery-play-button .image-gallery-svg {
+  height: 24px;
+  width: 24px;
+}
+
+/* Targets image size */
+.image-gallery-slide .image-gallery-image {
+  width: 577px;
+  height: 400px;
+}
+
+/* Targets image size for fullscreen mode */
+.fullscreen .image-gallery-slide .image-gallery-image {
+  width: 100vw;
+  height: 100vh;
+}

src/lib/helpers.ts

@@ -0,0 +1,9 @@
+/** 
+Shuffles/randomizes any given array
+**/
+export function shuffleArray<T>(array: Array<T>): void {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}

src/pages/harfen/fiona.tsx

@@ -3,8 +3,34 @@ import { Helmet } from "react-helmet";
 import Content from "../../components/Content";
 import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
+import ImageSlider from "../../components/imageslider/ImageSlider";
+import { ReactImageGalleryItem } from "react-image-gallery";
+
+import fiona1 from "../../images/harfen/fiona/Export-1.jpg";
+import fiona2 from "../../images/harfen/fiona/Export-2.jpg";
+import fiona3 from "../../images/harfen/fiona/Export-0003.jpg";
+import fiona4 from "../../images/harfen/fiona/Export-1163.jpg";
 
 function Fiona() {
+  const fionaImages: ReactImageGalleryItem[] = [
+    {
+      original: fiona1,
+      originalClass: "cursor-default",
+    },
+    {
+      original: fiona2,
+      originalClass: "cursor-default",
+    },
+    {
+      original: fiona3,
+      originalClass: "cursor-default",
+    },
+    {
+      original: fiona4,
+      originalClass: "cursor-default",
+    },
+  ];
+
   const headline = (
     <div className="grid grid-flow-row gap-y-2 md:gap-y-0 md:grid-flow-col md:justify-start md:gap-x-3">
       <span>fiona</span>
@@ -27,7 +53,9 @@ function Fiona() {
       />
       <Navbar />
       <Content className="lg:grid-flow-col" flow="col" headline={headline}>
-        <p>Fotos der Harfe folgen bald.</p>
+        <div className="lg:pl-20 sm:pl-0">
+          <ImageSlider images={fionaImages} />
+        </div>
         <div className="md:w-10/12 lg:w-10/12">
           <p className="mb-5 lg:w-9/12 text-lg">
             Mit 36 Saiten und einer Größe von etwa 140 cm ist das Modell

src/pages/harfen/index.tsx

@@ -6,12 +6,17 @@ import Content from "../../components/Content";
 import ImageSlider from "../../components/imageslider/ImageSlider";
 import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
-import harps1 from "../../images/harfen/harps1.jpg";
-import harps2 from "../../images/harfen/harps2.jpg";
-import harps3 from "../../images/harfen/harps3.jpg";
-import harps4 from "../../images/harfen/harps4.jpg";
-import harps7 from "../../images/harfen/harps7.jpg";
-import harps8 from "../../images/harfen/harps8.jpg";
+
+import harps1 from "../../images/harfen/index/Export-1.jpg";
+import harps2 from "../../images/harfen/index/Export-2.jpg";
+import harps3 from "../../images/harfen/index/Export-3.jpg";
+import harps4 from "../../images/harfen/index/Export-4.jpg";
+import harps5 from "../../images/harfen/index/Export-5.jpg";
+import harps6 from "../../images/harfen/index/Export-6.jpg";
+import harps7 from "../../images/harfen/index/Export-7.jpg";
+import harps8 from "../../images/harfen/index/Export-8.jpg";
+import harps9 from "../../images/harfen/index/Export-9.jpg";
+import { shuffleArray } from "../../lib/helpers";
 
 function Harfen() {
   const harpImages: ReactImageGalleryItem[] = [
@@ -31,6 +36,14 @@ function Harfen() {
       original: harps4,
       originalClass: "cursor-default",
     },
+    {
+      original: harps5,
+      originalClass: "cursor-default",
+    },
+    {
+      original: harps6,
+      originalClass: "cursor-default",
+    },
     {
       original: harps7,
       originalClass: "cursor-default",
@@ -39,8 +52,15 @@ function Harfen() {
       original: harps8,
       originalClass: "cursor-default",
     },
+    {
+      original: harps9,
+      originalClass: "cursor-default",
+    },
   ];
 
+  // Shuffles harpImages on pageload
+  shuffleArray(harpImages);
+
   return (
     <Layout>
       <Helmet

src/pages/harfen/isabeau.tsx

@@ -1,10 +1,36 @@
 import * as React from "react";
 import { Helmet } from "react-helmet";
+import { ReactImageGalleryItem } from "react-image-gallery";
 import Content from "../../components/Content";
+import ImageSlider from "../../components/imageslider/ImageSlider";
 import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
 
+import isabeau1 from "../../images/harfen/isabeau/Export-0102.jpg";
+import isabeau2 from "../../images/harfen/isabeau/Export-0105.jpg";
+import isabeau3 from "../../images/harfen/isabeau/Export-0124.jpg";
+import isabeau4 from "../../images/harfen/isabeau/Export-0184.jpg";
+
 function Isabeau() {
+  const isabeauImages: ReactImageGalleryItem[] = [
+    {
+      original: isabeau1,
+      originalClass: "cursor-default",
+    },
+    {
+      original: isabeau2,
+      originalClass: "cursor-default",
+    },
+    {
+      original: isabeau3,
+      originalClass: "cursor-default",
+    },
+    {
+      original: isabeau4,
+      originalClass: "cursor-default",
+    },
+  ];
+
   const headline = (
     <div className="grid grid-flow-row gap-y-2 md:gap-y-0 md:grid-flow-col md:justify-start md:gap-x-3">
       <span>isabeau</span>
@@ -27,7 +53,9 @@ function Isabeau() {
       />
       <Navbar />
       <Content className="lg:grid-flow-col" flow="col" headline={headline}>
-        <p>Fotos der Harfe folgen bald.</p>
+        <div className="lg:pl-20 sm:pl-0">
+          <ImageSlider images={isabeauImages} />
+        </div>
         <div className="md:w-10/12 lg:w-10/12">
           <p className="mb-5 lg:w-9/12 text-lg">
             Die kleine Harfe - ideal für Einsteiger:innen, für unterwegs und

src/pages/harfen/wyda.tsx

@@ -4,12 +4,13 @@ import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
 import ImageSlider from "../../components/imageslider/ImageSlider";
 import { ReactImageGalleryItem } from "react-image-gallery";
-import wyda1 from "../../images/harfen/wyda1.jpg";
-import wyda2 from "../../images/harfen/wyda2.jpg";
-import wyda3 from "../../images/harfen/wyda3.jpg";
-import wyda4 from "../../images/harfen/wyda4.jpg";
 import { Helmet } from "react-helmet";
 
+import wyda1 from "../../images/harfen/wyda/wyda1.jpg";
+import wyda2 from "../../images/harfen/wyda/wyda2.jpg";
+import wyda3 from "../../images/harfen/wyda/wyda3.jpg";
+import wyda4 from "../../images/harfen/wyda/wyda4.jpg";
+
 function Wyda() {
   const wydaImages: ReactImageGalleryItem[] = [
     {

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "esnext"],
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*"]
+}