add article image components #447

src/components2/Article/index.tsx

@@ -8,3 +8,4 @@ export { default as Kicker } from './Kicker';
 export { default as PublishDate } from './PublishDate';
 export { default as Quote } from './Quote';
 export { default as Text } from './Text';
+export { Image, MultiImage } from '../Image';

src/components2/Image/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
+import React from 'react';
 import styled from 'styled-components';
 import { media } from '~/styles/utils';
 
@@ -12,3 +13,32 @@ export const Insert = styled.img`
     margin-left: initial;
   `}
 `;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  margin: -10px;
+`;
+
+const ImageSpacer = styled.div`
+  position: relative;
+  padding: 10px;
+  flex: 1 1 100%;
+`;
+
+const Img = styled.img`
+  width: 100%;
+`;
+
+export const MultiImage = ({ sources }) => {
+  return (
+    <ImageWrapper>
+      {sources.map((source) => (
+        <ImageSpacer>
+          <Img src={source} />
+        </ImageSpacer>
+      ))}
+    </ImageWrapper>
+  );
+};
+
+export const Image = ({ source }) => <MultiImage sources={[source]} />;

src/pages/Research/pages/Landing/index.tsx

@@ -6,9 +6,13 @@ import {
   Text,
   Intro,
   Heading,
-  Quote
+  Quote,
+  Image,
+  MultiImage
 } from '~/components2/Article';
 
+import ExampleImageSource from '~/images/gastro/landing-bg.jpg';
+
 export default function ResearchLanding() {
   return (
     <ArticleWrapper hasToc>
@@ -71,6 +75,44 @@ export default function ResearchLanding() {
         welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
         als sicherer empfunden?
       </Text>
+      <Heading toc="Multi Image Test" as="h2">
+        Multi Image Test
+      </Heading>
+      <MultiImage sources={[ExampleImageSource, ExampleImageSource]} />
+      <Text>
+        Bisher gibt es kaum Erhebungen, welche Arten von Straßen, Wegen und
+        Kreuzungen die Verkehrsteilnehmer:innen subjektiv als sicher empfinden.
+        Insbesondere zur differenzierten Betrachtung verknüpfter Merkmale, wie
+        Führungsform der Radinfrastruktur (RVA), Ausführung, Breite sowie der
+        Situation links und rechts der RVA gibt es bisher kaum Untersuchungen.
+        Sind Radfahrstreifen mit Pollern die beste Lösung, um Konflikte zwischen
+        Auto und Fahrrad zu vermeiden oder sind ausreichend breite Radstreifen
+        entscheidend? Welchen Effekt hat die Einfärbung von Radstreifen? Unter
+        welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
+        als sicherer empfunden?
+      </Text>
+      <Heading toc="Multi Image Test 2" as="h2">
+        Multi Image Test 2
+      </Heading>
+      <MultiImage
+        sources={[ExampleImageSource, ExampleImageSource, ExampleImageSource]}
+      />
+      <Text>
+        Bisher gibt es kaum Erhebungen, welche Arten von Straßen, Wegen und
+        Kreuzungen die Verkehrsteilnehmer:innen subjektiv als sicher empfinden.
+        Insbesondere zur differenzierten Betrachtung verknüpfter Merkmale, wie
+        Führungsform der Radinfrastruktur (RVA), Ausführung, Breite sowie der
+        Situation links und rechts der RVA gibt es bisher kaum Untersuchungen.
+        Sind Radfahrstreifen mit Pollern die beste Lösung, um Konflikte zwischen
+        Auto und Fahrrad zu vermeiden oder sind ausreichend breite Radstreifen
+        entscheidend? Welchen Effekt hat die Einfärbung von Radstreifen? Unter
+        welchen Bedingungen wird die Führung im Seitenraum oder auf der Fahrbahn
+        als sicherer empfunden?
+      </Text>
+      <Heading toc="Single Image Test" as="h2">
+        Single Image Test
+      </Heading>
+      <Image source={ExampleImageSource} />
     </ArticleWrapper>
   );
 }