From 06608c7b5d4c7084846d49785b4dabbc75dd81f9 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Sat, 8 Mar 2025 20:53:30 +0700
Subject: [PATCH] feat: add Instagram share button to social share component

---
 app/components/ui/social-share.tsx | 14 ++++++++------
 app/pages/news-detail/index.tsx    |  6 +++---
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index f59d1e2..5b7017f 100644
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@@ -4,7 +4,6 @@ import {
   FacebookShareButton,
   LinkedinShareButton,
   TwitterShareButton,
-  InstapaperShareButton,
 } from 'react-share'
 
 import { FacebookIcon } from '~/components/icons/facebook'
@@ -28,6 +27,12 @@ export const SocialShareButtons = ({
     setShowPopup(true)
     setTimeout(() => setShowPopup(false), 2000)
   }
+
+  const handleInstagramShare = () => {
+    const instagramUrl = `https://www.instagram.com/direct/new/?text=${encodeURIComponent(title + ' ' + url)}`
+    window.open(instagramUrl, '_blank')
+  }
+
   return (
     <div className="flex items-center space-x-2">
       {showPopup && (
@@ -59,12 +64,9 @@ export const SocialShareButtons = ({
         <XIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
       </TwitterShareButton>
 
-      <InstapaperShareButton
-        url={url}
-        title={title}
-      >
+      <button onClick={handleInstagramShare}>
         <InstagramIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
-      </InstapaperShareButton>
+      </button>
     </div>
   )
 }
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index dd7cff9..36b3ac6 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -52,10 +52,10 @@ export const NewsDetailPage = () => {
                 </p>
               </div>
             </div>
-            {/* <IconsSocial className="flex-row" /> */}
+
             <SocialShareButtons
               url={`${currentUrl}`}
-              title={title}
+              title={`${title}`}
             />
           </div>
           {/* END TODO: create component for this section */}
@@ -78,7 +78,7 @@ export const NewsDetailPage = () => {
 
               <SocialShareButtons
                 url={`${currentUrl}`}
-                title={title}
+                title={`${title}`}
               />
             </div>
             <div className="flex flex-wrap items-end gap-2">