feat: add Instagram share button to social share component

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>
   )
 }

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">