From ae4f9026de29c990c281e0ac5ad96029e21b5ce8 Mon Sep 17 00:00:00 2001
From: marcellinuselbert11 <marcellinuselbert46@gmail.com>
Date: Mon, 25 Oct 2021 12:04:12 +0700
Subject: [PATCH] Clickable partners icon routing to their website

---
 src/components/_ui/PartnerMarquee.jsx | 37 +++++++++++++--------------
 src/utils/data/Partners.json          | 26 +++++++++++++++++++
 2 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/data/Partners.json

diff --git a/src/components/_ui/PartnerMarquee.jsx b/src/components/_ui/PartnerMarquee.jsx
index 7021976..609abf0 100644
--- a/src/components/_ui/PartnerMarquee.jsx
+++ b/src/components/_ui/PartnerMarquee.jsx
@@ -1,16 +1,16 @@
 import React, { useRef } from "react"
 import Image from "gatsby-image/withIEPolyfill"
 import useFixedPartnerLogos from "../../utils/queries/useFixedPartnerLogos"
+import Partners from "../../utils/data/Partners.json"
 import Ticker from "react-ticker"
 import styled from "@emotion/styled"
 
-const PartnerLogo = ({ partner }) => {
+const PartnerLogo = ({ partner, urls }) => {
   const { images } = useFixedPartnerLogos()
   console.log(images)
   const logoFile = images.edges.find(
-    img => img.node.name === partner.toLowerCase()
+    (img) => img.node.name === partner.toLowerCase()
   )
-
   const source = logoFile.node.childImageSharp.fixed
 
   const LogoContainer = styled("div")`
@@ -21,13 +21,15 @@ const PartnerLogo = ({ partner }) => {
 
   return (
     <LogoContainer className={`w-full mx-3 mt-2 mb-3`}>
-      <Image
-        className={`ticker`}
-        fixed={source}
-        objectFit="contain"
-        objectPosition="center"
-        alt={`${partner} icon`}
-      />
+      <a href={urls}>
+        <Image
+          className={`ticker`}
+          fixed={source}
+          objectFit="contain"
+          objectPosition="center"
+          alt={`${partner} icon`}
+        />
+      </a>
     </LogoContainer>
   )
 }
@@ -63,14 +65,7 @@ const PartnerMarqueeContainer = styled("div")`
 `
 
 const PartnerMarquee = ({ partner }) => {
-  const partners = useRef([
-    "atlassian",
-    "gojek",
-    "aws",
-    "grammarly",
-    "gsoc",
-    "hacktoberfest",
-  ])
+  const partners = useRef(Partners)
 
   return (
     <PartnerMarqueeContainer>
@@ -79,7 +74,11 @@ const PartnerMarquee = ({ partner }) => {
         {() => (
           <TickerContainer>
             {partners.current.map((partner, index) => (
-              <PartnerLogo partner={partner} key={index} />
+              <PartnerLogo
+                partner={partner.partner}
+                urls={partner.url}
+                key={index}
+              />
             ))}
           </TickerContainer>
         )}
diff --git a/src/utils/data/Partners.json b/src/utils/data/Partners.json
new file mode 100644
index 0000000..a08a76f
--- /dev/null
+++ b/src/utils/data/Partners.json
@@ -0,0 +1,26 @@
+[
+  {
+  "partner":"atlassian",
+  "url":"https://www.atlassian.com/"
+},
+{
+  "partner":"aws",
+  "url":"https://aws.amazon.com/"
+},
+{
+  "partner":"grammarly",
+  "url":"https://grammarly.com"
+},
+{
+  "partner":"gsoc",
+  "url":"https://summerofcode.withgoogle.com/"
+},
+{
+  "partner":"gojek",
+  "url":"https://www.gojek.com"
+},
+{
+  "partner":"hacktoberfest",
+  "url":"https://hacktoberfest.digitalocean.com/"
+}
+]
\ No newline at end of file