Social Share

1"use client";
2 
3import { Check, Link2 } from "lucide-react";
4import { useCallback, useState } from "react";
5 
6import { cn } from "@/lib/utils";
7 
8type SocialShareProps = {
9  url: string;
10  title: string;
11  className?: string;
12  /** Visible label - defaults to "Share" */
13  label?: string;
14};
15 
16function LinkedInIcon({ className }: { className?: string }) {
17  return (
18    <svg
19      viewBox="0 0 24 24"
20      className={className}
21      fill="currentColor"
22      aria-hidden
23    >
24      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
25    </svg>
26  );
27}
28 
29function XIcon({ className }: { className?: string }) {
30  return (
31    <svg
32      viewBox="0 0 24 24"
33      className={className}
34      fill="currentColor"
35      aria-hidden
36    >
37      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
38    </svg>
39  );
40}
41 
42export function SocialShare({
43  url,
44  title,
45  className,
46  label = "Share",
47}: SocialShareProps) {
48  const [copied, setCopied] = useState(false);
49 
50  const encodedUrl = encodeURIComponent(url);
51  const encodedTitle = encodeURIComponent(title);
52 
53  const copyLink = useCallback(async () => {
54    try {
55      await navigator.clipboard.writeText(url);
56      setCopied(true);
57      window.setTimeout(() => setCopied(false), 2000);
58    } catch {
59      const input = document.createElement("input");
60      input.value = url;
61      document.body.appendChild(input);
62      input.select();
63      document.execCommand("copy");
64      document.body.removeChild(input);
65      setCopied(true);
66      window.setTimeout(() => setCopied(false), 2000);
67    }
68  }, [url]);
69 
70  const shareItems = [
71    {
72      label: "Share on X",
73      href: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
74      icon: XIcon,
75    },
76    {
77      label: "Share on LinkedIn",
78      href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
79      icon: LinkedInIcon,
80    },
81  ] as const;
82 
83  return (
84    <nav
85      aria-label={label}
86      className={cn(
87// … truncated