feat: implement social share buttons

app/pages/news-detail/index.tsx

@@ -4,7 +4,7 @@ import { useRouteLoaderData } from 'react-router'
 import type { TTagResponse } from '~/apis/common/get-tags'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
-import { IconsSocial } from '~/components/ui/social-share'
+import { SocialShareButtons } from '~/components/ui/social-share'
 import { BERITA } from '~/data/contents'
 import type { loader } from '~/routes/_news.detail.$slug'
 import { formatDate } from '~/utils/formatter'
@@ -13,10 +13,10 @@ export const NewsDetailPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.detail.$slug',
   )
-
+  const currentUrl = globalThis.location
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { newsDetailData }: any = loaderData
-  const { title, content, featured_image, slug, author, live_at, tags } =
+  const { title, content, featured_image, author, live_at, tags } =
     newsDetailData
 
   return (
@@ -40,7 +40,11 @@ export const NewsDetailPage = () => {
                 <p className="text-sm">{formatDate(live_at)} . 5 min read </p>
               </div>
             </div>
-            <IconsSocial className="flex-row" />
+            {/* <IconsSocial className="flex-row" /> */}
+            <SocialShareButtons
+              url={`${currentUrl}`}
+              title={title}
+            />
           </div>
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
@@ -59,9 +63,10 @@ export const NewsDetailPage = () => {
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">
               <p className="mb-2">Share this post</p>
-              <IconsSocial
-                className="a"
-                slug={slug}
+
+              <SocialShareButtons
+                url={`${currentUrl}`}
+                title={title}
               />
             </div>
             <div className="flex flex-wrap items-end gap-2">