"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

interface ShareButtonsProps {
  url?: string;
  title?: string;
  className?: string;
}

const XIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="currentColor"
    className={className}
    aria-hidden
  >
    <path d="M18.2 3.5h2.8l-6.2 7 7.2 10H16l-4.8-6.9-6 6.9H2.3l6.7-7.7L2 3.5h6.2l4.4 6.4 5.6-6.4z" />
  </svg>
);

const LinkedInIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="currentColor"
    className={className}
    aria-hidden
  >
    <path d="M4.5 3.8a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4z" />
    <path d="M3.5 8.8h2.1v11.7H3.5z" />
    <path d="M9.1 8.8h2v1.6h.1c.3-.6 1.2-1.9 3-1.9 3.2 0 3.8 2.1 3.8 4.9v7.1h-2.1v-6.3c0-1.5 0-3.4-2.1-3.4-2.1 0-2.5 1.6-2.5 3.3v6.4H9.1z" />
  </svg>
);

const LinkIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <path d="M10 13a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 13" />
    <path d="M14 11a5 5 0 0 1 0 7L12.5 20.5a5 5 0 0 1-7-7L7 11" />
  </svg>
);

const CheckIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.8}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <path d="M5 12l4 4L19 7" />
  </svg>
);

export function ShareButtons({ url, title = "", className }: ShareButtonsProps) {
  const [copied, setCopied] = React.useState(false);

  const getShareUrl = React.useCallback(() => {
    return url || (typeof window !== "undefined" ? window.location.href : "");
  }, [url]);

  const handleShareX = React.useCallback(() => {
    const shareText = title ? `${title} ` : "";
    const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
      getShareUrl()
    )}&text=${encodeURIComponent(shareText)}`;
    window.open(shareUrl, "_blank", "noopener,noreferrer");
  }, [getShareUrl, title]);

  const handleShareLinkedIn = React.useCallback(() => {
    const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
      getShareUrl()
    )}`;
    window.open(shareUrl, "_blank", "noopener,noreferrer");
  }, [getShareUrl]);

  const handleCopyLink = React.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(getShareUrl());
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error("Copy failed", error);
    }
  }, [getShareUrl]);

  return (
    <div className={cn("flex flex-wrap items-center gap-3", className)}>
      <button
        type="button"
        onClick={handleShareX}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2",
          "text-sm font-medium text-foreground transition",
          "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
        )}
      >
        <XIcon className="h-4 w-4" />
        <span>Share on X</span>
      </button>

      <button
        type="button"
        onClick={handleShareLinkedIn}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2",
          "text-sm font-medium text-foreground transition",
          "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
        )}
      >
        <LinkedInIcon className="h-4 w-4" />
        <span>LinkedIn</span>
      </button>

      <button
        type="button"
        onClick={handleCopyLink}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2",
          "text-sm font-medium text-foreground transition",
          "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
        )}
      >
        {copied ? (
          <>
            <CheckIcon className="h-4 w-4 text-primary" />
            <span>Copied</span>
          </>
        ) : (
          <>
            <LinkIcon className="h-4 w-4" />
            <span>Copy link</span>
          </>
        )}
      </button>
    </div>
  );
}
Share Buttons

Dependencies

Files

Installation
