From b931afaaf3ed2f634cf1224a94589b663e4da962 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 22 Sep 2024 23:45:03 +0200
Subject: [PATCH] posters

---
 src/components/poster.tsx     | 40 +++++++++++++++++++++++
 src/contents/contribution.tsx | 61 ++++++++++++++++++++---------------
 2 files changed, 75 insertions(+), 26 deletions(-)
 create mode 100644 src/components/poster.tsx

diff --git a/src/components/poster.tsx b/src/components/poster.tsx
new file mode 100644
index 00000000..b8b50180
--- /dev/null
+++ b/src/components/poster.tsx
@@ -0,0 +1,40 @@
+export function Poster({postername, url}:{postername: string, url: string}){
+    return(
+        <a typeof="button" onClick={reSize({name: postername})}>
+          <img id={postername} className="picture-frame norm" src={url} alt={postername} />
+        </a>
+    )
+}
+
+function reSize({name}:{name: string}){
+    const resize =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{
+      var img; 
+      img = document.getElementById(name);
+      if (img!.className === "picture-frame norm"){
+        console.log("=== picture-frame norm")
+        img!.className = img!.className.replace("picture-frame norm", "full-screen-width");
+      }
+      else if (img!.className === "full-screen-width"){
+        console.log("=== full-screen-width")
+        img!.className = img!.className.replace("full-screen-width", "picture-frame norm");
+      }
+    }
+    return resize; 
+  }
+
+
+export function PosterRow({postername1, postername2, url1, url2}:{postername1: string, url1: string, postername2: string, url2: string}){
+    return(
+        <>
+        <div className="row">
+            <div className="col">
+                <Poster url={url1} postername={postername1} />
+            </div>
+            <div className="col">
+                <Poster url={url2} postername={postername2} />
+            </div>
+        </div>
+        <br/>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
index 6726f6a1..609349a0 100644
--- a/src/contents/contribution.tsx
+++ b/src/contents/contribution.tsx
@@ -5,6 +5,7 @@ import { H2} from "../components/Headings";
 import { OLDBFHStyleTabs } from "../components/Tabs";
 import { BlockQuoteB } from "../components/Quotes";
 import { useNavigateTabs } from "../utils/navigation";
+import { PosterRow } from "../components/poster";
 
 
 export function Contribution() {
@@ -2485,35 +2486,43 @@ IBzP/wMLphvI7KlpLQAAAABJRU5ErkJggg==
   )
 }
 
-function reSize({name}:{name: string}){
-  const resize =  (_event : React.MouseEvent<HTMLElement, MouseEvent>) =>{
-    var img; 
-    img = document.getElementById(name);
-    if (img!.className === "picture-frame norm"){
-      console.log("=== picture-frame norm")
-      img!.className = img!.className.replace("picture-frame norm", "full-screen-width");
-    }
-    else if (img!.className === "full-screen-width"){
-      console.log("=== full-screen-width")
-      img!.className = img!.className.replace("full-screen-width", "picture-frame norm");
-    }
-  }
-  return resize; 
-}
+
 
 function PosterGallery(){
   return(
     <>
-    <div className="row">
-      <div className="col">
-        <a typeof="button" onClick={reSize({name: "bielefeld"})}>
-          <img id="bielefeld" className="picture-frame norm" src="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-bielefeld-1.png" alt="" />
-        </a>
-      </div>
-      <div className="col">
-        <img className="picture-frame" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="" />
-      </div>
-    </div>
-     </>
+    <PosterRow
+    postername1="bielefeld"
+    postername2="helsinki"
+    url1="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-bielefeld-1.png"
+    url2="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-helsinki.png"
+    />
+    <PosterRow
+    postername1="dresden"
+    postername2="dtu"
+    url1="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-dresden.png"
+    url2="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-dtu.png"
+    />
+    <PosterRow
+    postername1="eindhoven"
+    postername2="freiburg"
+    url1="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-eindhoven.png"
+    url2="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-freiburg.png"
+    />
+    <PosterRow
+    postername1="leuven"
+    postername2="synbio"
+    url1="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-leuven.png"
+    url2="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-synbio-compressed.webp"
+    />
+     <PosterRow
+    postername1="wageningen"
+    postername2="stockholm"
+    url1="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bfh-poster-wageningen.png"
+    url2="https://static.igem.wiki/teams/5247/photos/meetup/posters-and-stuff/bdh-poster-stockholm.png"
+    />
+
+   
+    </>
   )
 }
\ No newline at end of file
-- 
GitLab