Share Menu

1"use client"
2 
3import { toast } from "sonner"
4 
5import { Button } from "@/components/ui/button"
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuItem,
10  DropdownMenuTrigger,
11} from "@/components/ui/dropdown-menu"
12import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
13 
14export type ShareMenuProps = {
15  /** Title passed to the native share sheet. */
16  title: string
17  /** URL to share. Relative URLs are resolved against the current origin. */
18  url: string
19}
20 
21export function ShareMenu({ title, url }: ShareMenuProps) {
22  const absoluteUrl = url.startsWith("http")
23    ? url
24    : typeof window !== "undefined"
25      ? new URL(url, window.location.origin).toString()
26      : url
27 
28  const urlEncoded = encodeURIComponent(absoluteUrl)
29 
30  return (
31    <DropdownMenu>
32      <DropdownMenuTrigger asChild>
33        <Button variant="outline" size="icon-sm">
34          <IconPlaceholder
35            lucide="ShareIcon"
36            tabler="IconShare2"
37            hugeicons="Share03Icon"
38            phosphor="ExportIcon"
39            remixicon="RiShare2Line"
40          />
41        </Button>
42      </DropdownMenuTrigger>
43 
44      <DropdownMenuContent
45        className="w-fit"
46        align="start"
47        alignOffset={-6}
48        collisionPadding={16}
49        onCloseAutoFocus={(e) => e.preventDefault()}
50      >
51        <DropdownMenuItem
52          onClick={() => {
53            copyText(absoluteUrl)
54            toast.success("Link copied")
55          }}
56        >
57          <IconPlaceholder
58            lucide="LinkIcon"
59            tabler="IconLink"
60            hugeicons="Link01Icon"
61            phosphor="LinkIcon"
62            remixicon="RiLinkM"
63          />
64          Copy link
65        </DropdownMenuItem>
66 
67        <DropdownMenuItem asChild>
68          <a
69            href={`https://x.com/intent/tweet?url=${urlEncoded}`}
70            target="_blank"
71            rel="noopener"
72          >
73            <XIcon />
74            Share on X
75          </a>
76        </DropdownMenuItem>
77 
78        <DropdownMenuItem asChild>
79          <a
80            href={`https://www.linkedin.com/sharing/share-offsite?url=${urlEncoded}`}
81            target="_blank"
82            rel="noopener"
83          >
84            <LinkedInIcon />
85            Share on LinkedIn
86          </a>
87        </DropdownMenuItem>
88 
89        {typeof navigator !== "undefined" && "share" in navigator && (
90          <DropdownMenuItem
91            onClick={(e) => {
92              e.preventDefault() // Prevent the menu from closing
93// … truncated