Share buttons

components/ShareButtons.jsx

@@ -1,10 +1,54 @@
-import { FaShare } from 'react-icons/fa';
+'use client';
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  WhatsappShareButton,
+  EmailShareButton,
+  FacebookIcon,
+  TwitterIcon,
+  WhatsappIcon,
+  EmailIcon,
+} from 'react-share';
+
+const ShareButton = ({ property }) => {
+  const shareUrl = `http://${process.env.NEXT_PUBLIC_DOMAIN}/properties/${property._id}`;
 
-const ShareButtons = ({ property }) => {
   return (
-    <button className='bg-orange-500 hover:bg-orange-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'>
-      <FaShare className='mr-2' /> Share Property
-    </button>
+    <>
+      <h3 className='text-xl font-bold text-center pt-2'>
+        Share This Property:
+      </h3>
+      <div className='flex gap-3 justify-center pb-5'>
+        <FacebookShareButton
+          url={shareUrl}
+          quote={property.name}
+          hashtag={`#${property.type}ForRent`}
+        >
+          <FacebookIcon size={40} round={true} />
+        </FacebookShareButton>
+        <TwitterShareButton
+          url={shareUrl}
+          title={property.name}
+          hashtags={[`${property.type}ForRent`]}
+        >
+          <TwitterIcon size={40} round={true} />
+        </TwitterShareButton>
+        <WhatsappShareButton
+          url={shareUrl}
+          title={property.name}
+          separator=':: '
+        >
+          <WhatsappIcon size={40} round={true} />
+        </WhatsappShareButton>
+        <EmailShareButton
+          url={shareUrl}
+          subject={property.name}
+          body={`Check out this property: ${shareUrl}`}
+        >
+          <EmailIcon size={40} round={true} />
+        </EmailShareButton>
+      </div>
+    </>
   );
 };
-export default ShareButtons;
+export default ShareButton;

package-lock.json

@@ -19,6 +19,7 @@
         "react-geocode": "^1.0.0-alpha.1",
         "react-icons": "^5.2.1",
         "react-map-gl": "^7.1.7",
+        "react-share": "^5.1.0",
         "react-spinners": "^0.14.1",
         "react-toastify": "^10.0.5"
       },
@@ -714,6 +715,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1254,6 +1261,29 @@
       "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==",
       "license": "MIT"
     },
+    "node_modules/jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "dependencies": {
+        "debug": "^2.1.3"
+      }
+    },
+    "node_modules/jsonp/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/jsonp/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
     "node_modules/kareem": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.6.3.tgz",
@@ -2198,6 +2228,19 @@
         }
       }
     },
+    "node_modules/react-share": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz",
+      "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.3.2",
+        "jsonp": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18"
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "react-geocode": "^1.0.0-alpha.1",
     "react-icons": "^5.2.1",
     "react-map-gl": "^7.1.7",
+    "react-share": "^5.1.0",
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5"
   },