feat: event share #608

created event share component ui and functionality
Planet-NULLCAST · Dec 2, 2021 · c0cb442 · c0cb442
1 parent f6da1ab
commit c0cb442
Show file tree

Hide file tree

Showing 7 changed files with 475 additions and 17 deletions.
diff --git a/component/layout/EventDetails/BookEvent.jsx b/component/layout/EventDetails/BookEvent.jsx
@@ -2,7 +2,7 @@ import styles from "./BookEvent.module.scss";
 import moment from "moment";
 import Link from "next/link";
 
-export default function BookEvent({ data }) {
+export default function BookEvent({ data,showshare }) {
   const { meta_title, description, event_time, location, registration_link } = data;
   return (
     <div className={styles.Book_Wrap}>
@@ -26,7 +26,7 @@ export default function BookEvent({ data }) {
           BOOK NOW
         </a>
       </Link>
-      <button className={styles.share}>SHARE EVENT</button>
+      <button className={styles.share} onClick={showshare}>SHARE EVENT</button>
     </div>
   );
 }
diff --git a/component/layout/EventDetails/EventSpotlight.jsx b/component/layout/EventDetails/EventSpotlight.jsx
@@ -2,22 +2,22 @@ import BookEvent from "./BookEvent";
 import styles from "./EventSpotlight.module.scss";
 import GuestDetails from "./GuestDetails";
 
-export default function EventSpotlight({ data }) {
+export default function EventSpotlight({ data, showwindow }) {
   const {
     banner_image,
     guest_name,
     guest_designation,
     guest_image,
     guest_bio,
-    registration_link
+    registration_link,
   } = data;
-
+  const showsharebox = (e) => showshare(e.value)
   return (
       <section className={styles.section}>
         <div className={styles.postWrap}>
           <figure>{banner_image && <img src={banner_image} alt="Event Image" />}</figure>
           <div className={styles.bookEvent}>
-            <BookEvent data={data} />
+            <BookEvent data={data} showshare={showwindow} />
           </div>
           <div className={styles.author}>
             <GuestDetails name={guest_name} avatar={guest_image} desig={guest_designation} />

diff --git a/component/layout/EventDetails/ShareEvent.jsx b/component/layout/EventDetails/ShareEvent.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import styles from "./ShareEvent.module.scss";
+import notify from "../../../lib/notify";
+import {
+  FacebookShareButton,
+  LinkedinShareButton,
+  TwitterShareButton,
+  WhatsappShareButton
+} from "react-share";
+import { FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon } from "react-share";
+function ShareEvent({ hidewindow, location }) {
+  const url = location;
+  const copytoclipboard = () => {
+    navigator.clipboard.writeText(url);
+    notify("Copied to clipboard", "success");
+  };
+  return (
+    <div className={styles.cover}>
+      <div className={styles.card}>
+        <div className={styles.topbar}>
+          <div>Share</div>
+          <div onClick={hidewindow} className={styles.close}>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4.66688L10.6669 0L12 1.33312L7.33312 6L12 10.6669L10.6669 12L6 7.33312L1.33312 12L0 10.6669L4.66688 6L0 1.33312L1.33312 0L6 4.66688Z"
+                fill="#ffffff"
+              />
+            </svg>
+          </div>
+        </div>
+        <div>
+          <FacebookShareButton url={url}>
+            <FacebookIcon size={32} />
+          </FacebookShareButton>
+          <LinkedinShareButton url={url}>
+            <LinkedinIcon size={32} />
+          </LinkedinShareButton>
+          <TwitterShareButton url={url}>
+            <TwitterIcon size={32} />
+          </TwitterShareButton>
+          <WhatsappShareButton url={url}>
+            <WhatsappIcon size={32} />
+          </WhatsappShareButton>
+        </div>
+        <div>
+          <input
+            onClick={copytoclipboard}
+            type="text"
+            name="link"
+            id="link"
+            readOnly={true}
+            value={url}
+            className={styles.link}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ShareEvent;
diff --git a/component/layout/EventDetails/ShareEvent.module.scss b/component/layout/EventDetails/ShareEvent.module.scss
@@ -0,0 +1,38 @@
+.cover{
+  @apply w-full h-screen flex flex-row justify-center items-center z-50 fixed;
+  background-color: rgba($color: #000000, $alpha: 0.6);
+}
+.card{
+  @apply w-full md:w-1/3 h-auto p-4 mx-4;
+  background-color: rgb(29, 28, 28);
+}
+.topbar{
+  @apply flex justify-between text-white font-bold text-xl my-2;
+}
+.link{
+  @apply p-2 w-full bg-gray-700 text-gray-100 mt-4 cursor-pointer;
+}
+.facebook{
+  margin: 10px 10px;
+  cursor: pointer;
+  svg:hover{
+    fill: #0e76a8;
+  }
+}
+.instagram{
+  margin: 10px 10px;
+  cursor: pointer;
+  svg:hover{
+    fill: #3f729b;
+  }
+}
+.twitter{
+  margin: 10px 10px;
+  cursor: pointer;
+  svg:hover{
+    fill: #00acee;
+  }
+}
+.close{
+  cursor: pointer;
+}
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "react-reveal": "^1.2.2",
     "react-select": "^4.3.1",
     "react-share": "^4.4.0",
+    "react-share-social": "^0.1.48",
     "react-slick": "^0.28.1",
     "react-toastify": "^7.0.4",
     "reactjs-popup": "^2.0.4",

diff --git a/pages/events/[event_id].js b/pages/events/[event_id].js
@@ -8,6 +8,8 @@ import { url, logoPath } from "../../seoschema/schema";
 import notify from "../../lib/notify";
 import EventSpotlight from "../../component/layout/EventDetails/EventSpotlight";
 import Detail from "../../component/layout/EventDetails/Detail";
+import ShareEvent from "../../component/layout/EventDetails/ShareEvent";
+import { useState } from "react";
 
 export async function getServerSideProps(context) {
   try {
@@ -59,6 +61,11 @@ export default function BlogListing({ event }) {
   } = event;
   const cookies = new Cookies();
   const userCookie = cookies.get("userNullcast");
+  const [viewshare, setViewshare] = useState(true)
+  const url = window.location.href
+  const showwindow = (id) => {
+    setViewshare(true)
+  }
   return (
     <>
       <Head>
@@ -125,7 +132,8 @@ export default function BlogListing({ event }) {
         <meta property="og:image:height" content="630" />
       </Head>
       <SiteHeader />
-      <EventSpotlight data={event} />
+      {viewshare && <ShareEvent location={url} hidewindow={()=> setViewshare(false)} />}
+      <EventSpotlight showwindow={()=> setViewshare(true)}  data={event} />
       <Detail event={event} />
       <SectionSwag />
       <SiteFooter />