Social sharing component in nextjs

Create a social sharing component with buttons to share content across different social media platforms.

"use client";
import { Button } from "@gmana/react/button";
import { Facebook, Linkedin, Send, Share, Twitter } from "lucide-react";
import React from "react";

export interface ShareProps {
  url?: string;
  title?: string;
  description?: string;
  className?: string;
}

interface ShareUrls {
  facebook: string;
  twitter: string;
  linkedin: string;
  telegram: string;
}
export const SocialShare: React.FC<ShareProps> = ({ url = typeof window !== "undefined" ? window.location.href : "", title = "", description = "", className = "" }) => {
  const encodedUrl: string = encodeURIComponent(url);
  const encodedTitle: string = encodeURIComponent(title);
  const encodedDescription: string = encodeURIComponent(description);

  const shareUrls: ShareUrls = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedTitle}&hashtag=${encodeURIComponent("#react-share-kit,#gmana")}`,
    twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
    telegram: `https://telegram.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
  };

  const handleShare = (platform: keyof ShareUrls): void => {
    const shareUrl = shareUrls[platform];

    window.open(shareUrl, "share-dialog", "width=600,height=400,toolbar=0,status=0,location=0,menubar=0");
  };

  const handleNativeShare = async (): Promise<void> => {
    if (navigator.share) {
      try {
        await navigator.share({
          title,
          text: description,
          url,
        });
      } catch (error) {
        console.error("Error sharing:", error);
      }
    } else {
      console.log("Native sharing not supported");
    }
  };

  return (
    <div className={`flex flex-col gap-4 p-4 ${className}`}>
      <h3 className="flex items-center gap-2 text-lg font-semibold">
        <Share className="h-5 w-5" />
        Share this article
      </h3>

      <div className="flex flex-wrap gap-2">
        {/* Facebook */}
        <Button variant="outline" className="flex items-center gap-2" onClick={() => handleShare("facebook")} type="button">
          <Facebook className="h-4 w-4" />
          Facebook
        </Button>

        {/* Twitter */}
        <Button variant="outline" className="flex items-center gap-2" onClick={() => handleShare("twitter")} type="button">
          <Twitter className="h-4 w-4" />
          Twitter
        </Button>

        {/* LinkedIn */}
        <Button variant="outline" className="flex items-center gap-2" onClick={() => handleShare("linkedin")} type="button">
          <Linkedin className="h-4 w-4" />
          LinkedIn
        </Button>

        {/* Telegram */}
        <Button variant="outline" className="flex items-center gap-2" onClick={() => handleShare("telegram")} type="button">
          <Send className="h-4 w-4" />
          Telegram
        </Button>

        {/* Native Share Button (Mobile) */}
        {typeof navigator !== "undefined" && navigator.share !== null && (
          <Button variant="outline" className="flex items-center gap-2" onClick={handleNativeShare} type="button">
            <Share className="h-4 w-4" />
            Share
          </Button>
        )}
      </div>
    </div>
  );
};