"use client";

import * as React from "react";
import { useState, useRef, useEffect, useCallback } from "react";
import { Share2, Twitter, Linkedin, Link2, Check, X } from "lucide-react";
import { cn } from "@/lib/utils";

interface ShareMenuProps {
  url?: string;
  title?: string;
  text?: string;
  className?: string;
  align?: "left" | "center" | "right";
}

export function ShareMenu({
  url,
  title = "",
  text = "",
  className,
  align = "left",
}: ShareMenuProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const [currentUrl, setCurrentUrl] = useState(url || "");
  const menuRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  // Set URL on client side if not provided
  useEffect(() => {
    if (!url && typeof window !== "undefined") {
      setCurrentUrl(window.location.href);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [url]);

  // Close menu on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        menuRef.current &&
        !menuRef.current.contains(event.target as Node) &&
        buttonRef.current &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }
  }, [isOpen]);

  // Close menu on Escape key
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsOpen(false);
        buttonRef.current?.focus();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleKeyDown);
      return () => document.removeEventListener("keydown", handleKeyDown);
    }
  }, [isOpen]);

  const handleCopyLink = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(currentUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  }, [currentUrl]);

  const shareToTwitter = useCallback(() => {
    const shareText = title || text;
    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}&text=${encodeURIComponent(shareText)}`;
    window.open(twitterUrl, "_blank", "noopener,noreferrer");
    setIsOpen(false);
  }, [currentUrl, title, text]);

  const shareToLinkedIn = useCallback(() => {
    const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(currentUrl)}`;
    window.open(linkedInUrl, "_blank", "noopener,noreferrer");
    setIsOpen(false);
  }, [currentUrl]);

  const alignmentClasses = {
    left: "left-0",
    center: "left-1/2 -translate-x-1/2",
    right: "right-0",
  };

  return (
    <div className={cn("relative inline-block", className)}>
      <button
        ref={buttonRef}
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
        aria-haspopup="menu"
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded-md px-3 py-2",
          "border border-border bg-background text-foreground",
          "text-sm font-medium",
          "transition-colors duration-150",
          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2",
          "focus-visible:ring-ring focus-visible:ring-offset-2"
        )}
      >
        <Share2 className="h-4 w-4" />
        <span>Share</span>
      </button>

      {isOpen && (
        <div
          ref={menuRef}
          role="menu"
          aria-label="Share options"
          className={cn(
            "absolute top-full z-50 mt-2 min-w-[180px]",
            "rounded-lg border border-border bg-card p-1 shadow-lg",
            "animate-in fade-in-0 zoom-in-95 duration-150",
            alignmentClasses[align]
          )}
        >
          <button
            type="button"
            role="menuitem"
            onClick={shareToTwitter}
            className={cn(
              "flex w-full items-center gap-3 rounded-md px-3 py-2",
              "text-sm text-foreground",
              "transition-colors duration-150",
              "hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
            )}
          >
            <Twitter className="h-4 w-4" />
            <span>Share on Twitter</span>
          </button>

          <button
            type="button"
            role="menuitem"
            onClick={shareToLinkedIn}
            className={cn(
              "flex w-full items-center gap-3 rounded-md px-3 py-2",
              "text-sm text-foreground",
              "transition-colors duration-150",
              "hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
            )}
          >
            <Linkedin className="h-4 w-4" />
            <span>Share on LinkedIn</span>
          </button>

          <div className="my-1 h-px bg-border" role="separator" />

          <button
            type="button"
            role="menuitem"
            onClick={handleCopyLink}
            className={cn(
              "flex w-full items-center gap-3 rounded-md px-3 py-2",
              "text-sm text-foreground",
              "transition-colors duration-150",
              "hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
            )}
          >
            {copied ? (
              <>
                <Check className="h-4 w-4 text-primary" />
                <span>Link copied!</span>
              </>
            ) : (
              <>
                <Link2 className="h-4 w-4" />
                <span>Copy link</span>
              </>
            )}
          </button>
        </div>
      )}
    </div>
  );
}
Share Menu

Dependencies

Files

Installation
