Possible implementation for social share

package.json

@@ -51,6 +51,7 @@
         "react": "^17.0.1",
         "react-bootstrap": "^1.4.3",
         "react-dom": "^17.0.1",
+        "react-share": "^4.3.1",
         "url-loader": "^2.3.0",
         "validator": "^11.1.0",
         "woocommerce-api": "^1.5.0"
@@ -71,4 +72,4 @@
         "prettier": "^2.2.1",
         "serialize-javascript": "^2.1.2"
     }
-}
+}

pages/product/[slug].js

@@ -2,15 +2,27 @@ import Layout from '../../src/components/layouts/Layout';
 import AddToCartButton from '../../src/components/cart/AddToCartButton';
 import client from '../../src/apollo/ApolloClient';
 import Image from '../../src/components/Image';
+import SocialShare from '../../src/components/social-share/SocialShare';
+
 import { 
     PRODUCT_QUERY,
     PRODUCT_SLUGS 
 } from '../../src/queries';
 
+import { useRouter } from 'next/router'
+
+
+
+
 const Product = ({data}) => {
 
     const { product } = data || {}
 
+    const router = useRouter();
+
+
+    const path = router.asPath; // url path: starts with backslash (/) 
+
     return (
         <Layout>
             {product ? (
@@ -30,13 +42,15 @@ const Product = ({data}) => {
                                 </span>
                             </p>
                             <AddToCartButton product={product} />
+
                         </div>
                     </div>
                     <div className="product-container" key={product?.id}>
                         <div
                             className="product-description"
                             dangerouslySetInnerHTML={{ __html: product?.description }}
                         />
+                         <SocialShare path={path} />
                     </div>
                 </div>
             ) : (

src/components/social-share/SocialShare.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import config from '../../../client-config';
+
+import {
+    FacebookShareButton,
+    FacebookIcon,
+    TwitterShareButton,
+    TwitterIcon,
+    WhatsappShareButton,
+    WhatsappIcon
+} from "react-share";
+
+
+
+const SocialShare = ( { path } ) => {
+
+    const { siteUrl }  = config;
+    const shareUrl = `${siteUrl}${path}`;
+
+    return (
+        <div className="social-share">
+            <FacebookShareButton url={shareUrl}>
+                <FacebookIcon size={32} round={true} />
+            </FacebookShareButton>
+            <TwitterShareButton url={shareUrl}> 
+                <TwitterIcon size={32} round={true} />
+            </TwitterShareButton>
+            <WhatsappShareButton url={shareUrl}>
+                <WhatsappIcon size={32} round={true} />
+            </WhatsappShareButton>
+        </div>
+    )
+}
+
+export default SocialShare