feat: Add Reddit share button to SocialShare component

components/common/SocialShare.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
-
 // Icons
-import { BsTwitter, BsLinkedin, BsFacebook } from 'react-icons/bs'
+import { BsTwitter, BsLinkedin, BsFacebook ,BsReddit} from 'react-icons/bs'
 import { FaHackerNewsSquare } from 'react-icons/fa'
 
 interface SocialShareProps {
+  title:string
   url: string
   direction?: string
   size?: string
@@ -13,38 +13,51 @@ interface SocialShareProps {
   linkedin?: boolean
   facebook?: boolean
   hackerNews?: boolean
+  reddit?: boolean
 }
-
+const extractTitleFromURL = (url: string): string => {
+  const slug = url.split('/').pop() || '';
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
 const SocialShare:FC<SocialShareProps> = ({
+  reddit= true,
   twitter = true,
   linkedin = true,
   facebook = false,
   hackerNews = false,
   url,
   direction = "row",
   size = "xl" || "lg" || "md" || "sm" || "xs",
-  gap = 2
+  gap = 2,
+
 }) => {
-
+  const title= extractTitleFromURL(url);
   const commonStyle = `gap-${gap} ${direction == "row" ? "flex-row" : "flex-col"}`
   const iconSize = `text-${size}`
 
   return (
     <div className={` ${commonStyle} ${iconSize} flex  gap-2`}>
-      {twitter && <TwitterLink url={url} />}
-      {linkedin && <LinkedinLink url={url}/>}
-      {facebook && <FacebookLink url={url}/>}
-      {hackerNews && <HackerNewsLink url={url}/>}
+      {twitter && <TwitterLink url={url} title={title} />}
+      {linkedin && <LinkedinLink url={url} title={title} />}
+      {facebook && <FacebookLink url={url} title={title} />}
+      {hackerNews && <HackerNewsLink url={url} title={title} />}
+      {reddit && <RedditLink url={url} title={title} />}
     </div>
   )
 }
 
 export default SocialShare
 
+
 interface SocialLinkProps {
   url: string
+  title: string
 }
 
+
 const TwitterLink:FC<SocialLinkProps> = ({url}) => {
   return (
     <a href={`https://twitter.com/intent/tweet?url=${url}`}>
@@ -72,4 +85,12 @@ const HackerNewsLink:FC<SocialLinkProps> = ({url}) => {
       <FaHackerNewsSquare/>
     </a>
   )
+}
+
+const RedditLink: FC<SocialShareProps> = ({title , url}) => {
+  return (
+    <a href={`https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`}>
+      <BsReddit/>
+    </a>
+  )
 }

package.json

@@ -25,6 +25,7 @@
     "react-intersection-observer": "^9.4.3",
     "react-markdown": "^8.0.5",
     "react-player": "^2.12.0",
+    "react-router-dom": "^6.26.2",
     "react-slideshow-image": "^4.0.5",
     "rss": "^1.2.2",
     "sanity": "^3.48.1",