53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
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 postURL = encodeURI(`https://${Config.SiteDomain}/blog/${props.postId}`);
|
|
const copyShareText = `${props.title} ${props.subtitle ? `- ${props.subtitle}` : ""} - ${
|
|
Config.Nickname
|
|
}'s Blog ${postURL}`;
|
|
const { toast } = useToast();
|
|
return (
|
|
<div className="flex justify-center space-x-4 py-3 text-2xl">
|
|
{props.allowShare !== false ? (
|
|
<>
|
|
<FacebookShareButton className="mx-2" quote={props.quote ?? props.title} url={postURL}>
|
|
<FaFacebook className="hover:text-blue-500" title="Share to Facebook" />
|
|
</FacebookShareButton>
|
|
<TwitterShareButton className="mx-2" title={props.title} url={postURL}>
|
|
<FaTwitter className="hover:text-sky-500" title="Share to Twitter" />
|
|
</TwitterShareButton>
|
|
<LinkedinShareButton className="mx-2" title={props.title} url={postURL}>
|
|
<FaLinkedin className="hover:text-blue-500" title="Share to Linkedin" />
|
|
</LinkedinShareButton>
|
|
<RedditShareButton className="mx-2" title={props.title} url={postURL}>
|
|
<FaReddit className="hover:text-orange-500" title="Share to Reddit" />
|
|
</RedditShareButton>
|
|
<CopyToClipboard
|
|
onCopy={() => {
|
|
toast({ description: "Link is copied successfully" });
|
|
}}
|
|
text={copyShareText}
|
|
>
|
|
<FaLink
|
|
className="mx-2 cursor-pointer hover:text-gray-500"
|
|
title="Share with the post url and description"
|
|
/>
|
|
</CopyToClipboard>
|
|
</>
|
|
) : (
|
|
<div className="my-auto font-bold text-sm">{"SHARING IS NOT ALLOWED"}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|