Merge pull request #12 from OpenUpSA/feature/sharing-pullout

Added share drawer and used proper social media sharing links
OpenUpSA · Sep 10, 2024 · 19b3117 · 19b3117
2 parents e936e26 + f5df29b
commit 19b3117
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 9 deletions.
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
@@ -128,4 +128,12 @@ body {
   .ff-new-title-bold {
     font-family: NewTitle-Bold, sans-serif;
   }
+
+  .bg-dark-blue {
+    background: #091c45;
+  }
+
+  .inset-b-50 {
+    bottom: 50%;
+  }
 }
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -3,6 +3,8 @@ import { getMessages } from "next-intl/server";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import IntlProvider from "./IntlProvider";
 
+import { ShareDrawer } from "components/shareDrawer";
+
 import "./globals.css";
 
 export async function generateMetadata({
@@ -35,6 +37,7 @@ export default async function RootLayout({
           <main className="flex h-screen flex-col p-2 max-w-7xl mx-auto">
             <div className="m-auto">{children}</div>
           </main>
+          <ShareDrawer />
         </IntlProvider>
       </body>
       <GoogleAnalytics gaId="G-GB9C1NQ8N0" />

diff --git a/components/shareDrawer/index.tsx b/components/shareDrawer/index.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+import { useState } from "react";
+
+import { SharingList } from "components/sharingList";
+
+export function ShareDrawer() {
+  // Do not show share drawer on home or debrief pages
+  const path = usePathname();
+  if (path.indexOf("debrief") > 1 || path.indexOf("/", 1) == -1) return;
+
+  const [showShareDrawer, setShowShareDrawer] = useState(false);
+
+  const toggleShareDrawer = (e: any) => {
+    setShowShareDrawer(!showShareDrawer);
+  };
+
+  return (
+    <div
+      className={`fixed right-0 inset-b-50 ${
+        showShareDrawer ? "w-15" : "w-12"
+      }`}
+    >
+      <div className="bg-dark-blue rounded-l-full pr-5 shadow-lg">
+        <button
+          onClick={toggleShareDrawer}
+          className={
+            "rounded-full	bg-dark-blue h-11 w-11 text-center flex justify-center items-center float-left mr-5" +
+            (showShareDrawer ? "" : "")
+          }
+        >
+          <Image
+            src="/images/social/share.png"
+            alt="Share icon"
+            width="26"
+            height="20"
+          />
+        </button>
+        <SharingList bgColorClass="bg-dark-blue" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/sharingList/index.tsx b/components/sharingList/index.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-export function SharingList() {
+export function SharingList({ bgColorClass }: { bgColorClass: string }) {
   const [copyLinkPing, setCopyLinkPing] = useState(false);
   const copyLink = (e: any) => {
     setCopyLinkPing(true);
@@ -13,13 +13,19 @@ export function SharingList() {
     setTimeout(() => setCopyLinkPing(false), 750);
   };
 
+  const urlToShare = encodeURIComponent(
+    "https://green-connection-oil-water.netlify.app/en/debrief"
+  );
+
   return (
     <ul className="flex flex-row gap-4">
       <li>
         <button
           onClick={copyLink}
           className={
-            "rounded-full	bg-red-500 h-11 w-11 text-center flex justify-center items-center" +
+            `rounded-full	${
+              bgColorClass ? bgColorClass : "bg-red-500"
+            } h-11 w-11 text-center flex justify-center items-center` +
             (copyLinkPing ? " animate-ping" : "")
           }
         >
@@ -33,9 +39,11 @@ export function SharingList() {
       </li>
       <li>
         <a
-          href="https://facebook.com?url=fillin"
+          href={`https://web.facebook.com/share_channel/?link=${urlToShare}&app_id=966242223397117&source_surface=external_reshare&display&hashtag`}
           target="_blank"
-          className="display-block rounded-full	bg-red-500 h-11 w-11 text-center flex justify-center items-center"
+          className={`display-block rounded-full ${
+            bgColorClass ? bgColorClass : "bg-red-500"
+          } h-11 w-11 text-center flex justify-center items-center`}
         >
           <Image
             src="/images/social/facebook.png"
@@ -47,9 +55,11 @@ export function SharingList() {
       </li>
       <li>
         <a
-          href="https://linkedin.com?url=fillin"
+          href={`https://www.linkedin.com/feed/?shareActive=true&shareUrl=${urlToShare}`}
           target="_blank"
-          className="display-block rounded-full	bg-red-500 h-11 w-11 text-center flex justify-center items-center"
+          className={`display-block rounded-full	${
+            bgColorClass ? bgColorClass : "bg-red-500"
+          } h-11 w-11 text-center flex justify-center items-center`}
         >
           <Image
             src="/images/social/linkedin.png"
@@ -61,9 +71,11 @@ export function SharingList() {
       </li>
       <li>
         <a
-          href="https://twitter.com?url=fillin"
+          href={`https://x.com/intent/tweet?url=${urlToShare}`}
           target="_blank"
-          className="display-block rounded-full	bg-red-500 h-11 w-11 text-center flex justify-center items-center"
+          className={`display-block rounded-full	${
+            bgColorClass ? bgColorClass : "bg-red-500"
+          } h-11 w-11 text-center flex justify-center items-center`}
         >
           <Image
             src="/images/social/twitter.png"