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;