✨ Add Leihharfen image to page, Add line break for headlines on small screen (#71)

* 🍱 Add Leihharfen image

* 💄 Not-Related: Increase width in zubehör text

* ✨ Add Leihharfen image to Leihharfen page

* 🏷️ Add JSX.Element to headline type

* ✨ Make headlines in harfen pages responsive
Breaks into two lines when screen is small

Author: fre-ben

src/components/Content.tsx

@@ -5,7 +5,7 @@ type ContentProps = {
   children: ReactChild[] | ReactChild;
   className?: string;
   flow: string;
-  headline: string;
+  headline: string | JSX.Element;
 };
 
 function Content({ children, className, flow, headline }: ContentProps) {

src/images/harfen/leihharfen.jpg

@@ -5,6 +5,13 @@ import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
 
 function Fiona() {
+  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>
+      <span>(36 Saiten)</span>
+    </div>
+  );
+
   return (
     <Layout>
       <Helmet
@@ -19,13 +26,9 @@ function Fiona() {
         htmlAttributes={{ lang: "de" }}
       />
       <Navbar />
-      <Content
-        className="lg:grid-flow-col"
-        flow="col"
-        headline="fiona (36 Saiten)"
-      >
+      <Content className="lg:grid-flow-col" flow="col" headline={headline}>
         <p>Fotos der Harfe folgen bald.</p>
-        <div className="md:w-7/12 lg:w-10/12">
+        <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
             &quot;Fiona&quot; das größte in der Reihe.

src/pages/harfen/fiona.tsx

@@ -5,6 +5,13 @@ import Layout from "../../components/Layout";
 import Navbar from "../../components/navbar/Navbar";
 
 function Isabeau() {
+  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>
+      <span>(29 Saiten)</span>
+    </div>
+  );
+
   return (
     <Layout>
       <Helmet
@@ -19,13 +26,9 @@ function Isabeau() {
         htmlAttributes={{ lang: "de" }}
       />
       <Navbar />
-      <Content
-        className="lg:grid-flow-col"
-        flow="col"
-        headline="isabeau (29 Saiten)"
-      >
+      <Content className="lg:grid-flow-col" flow="col" headline={headline}>
         <p>Fotos der Harfe folgen bald.</p>
-        <div className="md:w-7/12 lg:w-10/12">
+        <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
             alle, die ein handliches Instrument suchen.

src/pages/harfen/isabeau.tsx

@@ -30,6 +30,13 @@ function Wyda() {
     },
   ];
 
+  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>wyda</span>
+      <span>(34 Saiten)</span>
+    </div>
+  );
+
   return (
     <Layout>
       <Helmet
@@ -44,15 +51,11 @@ function Wyda() {
         htmlAttributes={{ lang: "de" }}
       />
       <Navbar />
-      <Content
-        className="lg:grid-flow-col"
-        flow="col"
-        headline="wyda (34 Saiten)"
-      >
+      <Content className="lg:grid-flow-col" flow="col" headline={headline}>
         <div className="lg:pl-20 sm:pl-0">
           <ImageSlider images={wydaImages} />
         </div>
-        <div className="md:w-7/12 lg:w-10/12">
+        <div className="md:w-10/12 lg:w-10/12">
           <p className="mb-5 w-11/12 text-lg">
             Die Mittlere von Albrecht Nüchters Harfen:
             <br />

src/pages/harfen/wyda.tsx

@@ -3,10 +3,19 @@ import Navbar from "../components/navbar/Navbar";
 import Layout from "../components/Layout";
 import ButtonLink from "../components/button/ButtonLink";
 import Content from "../components/Content";
-// import { StaticImage } from "gatsby-plugin-image";
 import { Helmet } from "react-helmet";
+import ImageSlider from "../components/imageslider/ImageSlider";
+import { ReactImageGalleryItem } from "react-image-gallery";
+import leihharfen from "../images/harfen/leihharfen.jpg";
 
 const Leihharfen = () => {
+  const leihharfenImages: ReactImageGalleryItem[] = [
+    {
+      original: leihharfen,
+      originalClass: "cursor-default",
+    },
+  ];
+
   return (
     <Layout>
       <Helmet
@@ -22,7 +31,7 @@ const Leihharfen = () => {
       />
       <Navbar />
       <Content flow="col" headline="leihharfen">
-        <div className="lg:pl-20 md:w-7/12 lg:w-9/12">
+        <div className="lg:pl-20 md:w-11/12 lg:w-10/12 order-2 lg:order-1">
           <p className="mb-5 w-11/12">
             Sie möchten eine Harfe leihen? Bei uns finden Sie eine große Auswahl
             an Harfen in den unterschiedlichsten Größen und Ausführungen. <br />
@@ -32,15 +41,8 @@ const Leihharfen = () => {
           <p className="mb-10">Anfragen bitte telefonisch oder per E-Mail.</p>
           <ButtonLink destination="kontakt" label="Kontakt" primary={true} />
         </div>
-        <div className="pr-10">
-          {/* no image available at the moment */}
-          {/* <StaticImage
-            src="../images/placeholder_dude.jpg"
-            alt="placeholder image"
-            placeholder="blurred"
-            width={400}
-            height={500}
-          /> */}
+        <div className="lg:pr-20 sm:pl-0 order-1 lg:order-2">
+          <ImageSlider images={leihharfenImages} />
         </div>
       </Content>
     </Layout>

src/pages/leihharfen.tsx

@@ -43,7 +43,7 @@ function Zubehoer() {
         <div className="lg:pl-20 sm:pl-0">
           <ImageSlider images={zubehoerImages} />
         </div>
-        <div className="md:w-7/12 lg:w-10/12">
+        <div className="md:w-11/12 lg:w-10/12">
           <p className="mb-5 w-11/12 text-lg">
             Passend zu den Harfen gibt es bei uns hochwertige Transporttaschen,
             Saiten und Stimmschlüssel.