fix linkdien button

starknet-io · Apr 1, 2024 · c4a5f55 · c4a5f55
1 parent ab0b5b8
commit c4a5f55
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx
@@ -1,9 +1,5 @@
 import { Flex, Icon, Text } from "@chakra-ui/react";
-import {
-  LinkedinShareButton,
-  TwitterShareButton,
-  TelegramShareButton,
-} from "react-share";
+import { TwitterShareButton, TelegramShareButton } from "react-share";
 import { FaTelegram } from "react-icons/fa";
 import { FaTwitter } from "react-icons/fa";
 import { FaLinkedin } from "react-icons/fa";
@@ -13,8 +9,13 @@ interface Props {
     readonly slug: string;
   };
 }
+
 const SocialShare = ({ params: { slug, locale } }: Props) => {
   const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`;
+  const encodedUrl = encodeURIComponent(shareUrl);
+  const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
+  const handleLinkedinShare = () => window.open(linkedinShareUrl, "_blank");
+
   return (
     <Flex
       gap={"24px"}
@@ -32,7 +33,8 @@ const SocialShare = ({ params: { slug, locale } }: Props) => {
         <TwitterShareButton url={shareUrl}>
           <Icon
             title="TwitterShareButton"
-            boxSize="22px"
+            boxSize="26px"
+            pt="1"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTwitter}
@@ -41,21 +43,22 @@ const SocialShare = ({ params: { slug, locale } }: Props) => {
         <TelegramShareButton url={shareUrl}>
           <Icon
             title="TelegramShareButton"
-            boxSize="22px"
+            boxSize="26px"
+            pt="1"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTelegram}
           />
         </TelegramShareButton>
-        <LinkedinShareButton url={shareUrl}>
-          <Icon
-            title="LinkedinShareButton"
-            boxSize="28px"
-            color="grey.coolText"
-            _dark={{ color: "grey.morning" }}
-            as={FaLinkedin}
-          />
-        </LinkedinShareButton>
+        <Icon
+          title="LinkedinShareButton"
+          boxSize="22px"
+          padding="0"
+          color="grey.coolText"
+          _dark={{ color: "grey.morning" }}
+          as={FaLinkedin}
+          onClick={handleLinkedinShare}
+        />
       </Flex>
     </Flex>
   );