initial commit

components/readerpage/ShareButtons.tsx

@@ -0,0 +1,53 @@
+import { useToast } from "@/components/ui/use-toast";
+import { Config } from "@/data/config";
+import { FacebookShareButton, LinkedinShareButton, RedditShareButton, TwitterShareButton } from "next-share";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { FaFacebook, FaLink, FaLinkedin, FaReddit, FaTwitter } from "react-icons/fa6";
+
+export const ShareButtons = (props: {
+  postId: string;
+  allowShare?: boolean | null;
+  subtitle?: string | null;
+  title: string;
+  quote?: string | null;
+}) => {
+  const url = `https://${Config.SiteDomain}/blog/${props.postId}`;
+  const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
+    Config.Nickname
+  }'s Blog ${url}`;
+  const { toast } = useToast();
+  return (
+    <div className="my-3 flex space-x-4 text-2xl">
+      {props.allowShare != false ? (
+        <>
+          <div className="my-auto text-sm font-bold">{"SHARE :"}</div>
+          <FacebookShareButton className="mx-2" url={url} quote={props.quote ?? props.title}>
+            <FaFacebook title="Share to Facebook" className="hover:text-blue-500" />
+          </FacebookShareButton>
+          <TwitterShareButton className="mx-2" url={url} title={props.title}>
+            <FaTwitter title="Share to Twitter" className="hover:text-sky-500" />
+          </TwitterShareButton>
+          <LinkedinShareButton className="mx-2" url={url} title={props.title}>
+            <FaLinkedin title="Share to Linkedin" className="hover:text-blue-500" />
+          </LinkedinShareButton>
+          <RedditShareButton className="mx-2" url={url} title={props.title}>
+            <FaReddit title="Share to Reddit" className="hover:text-orange-500" />
+          </RedditShareButton>
+          <CopyToClipboard
+            onCopy={() => {
+              toast({ description: "Link is copied successfully" });
+            }}
+            text={copyShareText}
+          >
+            <FaLink
+              title="Share with the post url and description"
+              className="hover:text-gray-500 mx-2 cursor-pointer"
+            />
+          </CopyToClipboard>
+        </>
+      ) : (
+        <div className="my-auto text-sm font-bold">{"SHARING IS NOT ALLOWED"}</div>
+      )}
+    </div>
+  );
+};