{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "share-menu",
  "title": "Share Menu",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "Share menu to copy a link or post to X, LinkedIn, and the native share sheet.",
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "sonner"
  ],
  "files": [
    {
      "path": "src/registry/components/share-menu/share-menu.tsx",
      "content": "\"use client\"\r\n\r\nimport { toast } from \"sonner\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\"\r\n\r\nexport type ShareMenuProps = {\r\n  /** Title passed to the native share sheet. */\r\n  title: string\r\n  /** URL to share. Relative URLs are resolved against the current origin. */\r\n  url: string\r\n}\r\n\r\nexport function ShareMenu({ title, url }: ShareMenuProps) {\r\n  const absoluteUrl = url.startsWith(\"http\")\r\n    ? url\r\n    : typeof window !== \"undefined\"\r\n      ? new URL(url, window.location.origin).toString()\r\n      : url\r\n\r\n  const urlEncoded = encodeURIComponent(absoluteUrl)\r\n\r\n  return (\r\n    <DropdownMenu>\r\n      <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\" size=\"icon-sm\">\r\n          <IconPlaceholder\r\n            lucide=\"ShareIcon\"\r\n            tabler=\"IconShare2\"\r\n            hugeicons=\"Share03Icon\"\r\n            phosphor=\"ExportIcon\"\r\n            remixicon=\"RiShare2Line\"\r\n          />\r\n        </Button>\r\n      </DropdownMenuTrigger>\r\n\r\n      <DropdownMenuContent\r\n        className=\"w-fit\"\r\n        align=\"start\"\r\n        alignOffset={-6}\r\n        collisionPadding={16}\r\n        onCloseAutoFocus={(e) => e.preventDefault()}\r\n      >\r\n        <DropdownMenuItem\r\n          onClick={() => {\r\n            copyText(absoluteUrl)\r\n            toast.success(\"Link copied\")\r\n          }}\r\n        >\r\n          <IconPlaceholder\r\n            lucide=\"LinkIcon\"\r\n            tabler=\"IconLink\"\r\n            hugeicons=\"Link01Icon\"\r\n            phosphor=\"LinkIcon\"\r\n            remixicon=\"RiLinkM\"\r\n          />\r\n          Copy link\r\n        </DropdownMenuItem>\r\n\r\n        <DropdownMenuItem asChild>\r\n          <a\r\n            href={`https://x.com/intent/tweet?url=${urlEncoded}`}\r\n            target=\"_blank\"\r\n            rel=\"noopener\"\r\n          >\r\n            <XIcon />\r\n            Share on X\r\n          </a>\r\n        </DropdownMenuItem>\r\n\r\n        <DropdownMenuItem asChild>\r\n          <a\r\n            href={`https://www.linkedin.com/sharing/share-offsite?url=${urlEncoded}`}\r\n            target=\"_blank\"\r\n            rel=\"noopener\"\r\n          >\r\n            <LinkedInIcon />\r\n            Share on LinkedIn\r\n          </a>\r\n        </DropdownMenuItem>\r\n\r\n        {typeof navigator !== \"undefined\" && \"share\" in navigator && (\r\n          <DropdownMenuItem\r\n            onClick={(e) => {\r\n              e.preventDefault() // Prevent the menu from closing\r\n              navigator.share({ title, url: absoluteUrl }).catch(() => {})\r\n            }}\r\n          >\r\n            <IconPlaceholder\r\n              lucide=\"EllipsisIcon\"\r\n              tabler=\"IconDots\"\r\n              hugeicons=\"MoreHorizontalIcon\"\r\n              phosphor=\"DotsThreeIcon\"\r\n              remixicon=\"RiMoreLine\"\r\n            />\r\n            Other app\r\n          </DropdownMenuItem>\r\n        )}\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  )\r\n}\r\n\r\nconst copyText = async (text: string) => {\r\n  try {\r\n    await navigator.clipboard.writeText(text)\r\n    return true\r\n  } catch {\r\n    return false\r\n  }\r\n}\r\n\r\ntype IconProps = React.ComponentProps<\"svg\">\r\n\r\nfunction XIcon(props: IconProps) {\r\n  return (\r\n    <svg viewBox=\"0 0 24 24\" aria-hidden {...props}>\r\n      <path\r\n        d=\"m22.991 23-8.533-12.612L22.42 1h-2.77l-6.422 7.575L8.105 1H1.123l8.225 12.158L1 23h2.77l6.81-8.03L16.015 23H23zM7.193 2.769l12.49 18.462h-2.76L4.43 2.769z\"\r\n        fill=\"currentColor\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nfunction LinkedInIcon(props: IconProps) {\r\n  return (\r\n    <svg viewBox=\"0 0 24 24\" aria-hidden {...props}>\r\n      <path\r\n        d=\"M22.274 0H1.728C.692 0 0 .685 0 1.715v20.569C0 23.316.864 24 1.727 24h20.546C23.31 24 24 23.315 24 22.285V1.716C24.001.684 23.31 0 22.274 0M7.08 20.4H3.454V8.915h3.625zM5.352 7.371c-1.209 0-2.07-.856-2.07-2.056s.863-2.059 2.07-2.059c1.21 0 2.073.859 2.073 2.059S6.388 7.37 5.352 7.37M20.548 20.4h-3.626v-5.485c0-1.371 0-3.087-1.9-3.087-1.898 0-2.073 1.372-2.073 2.916V20.4H9.325V8.915h3.454v1.541c.69-1.2 2.073-1.885 3.453-1.885 3.627 0 4.316 2.4 4.316 5.485z\"\r\n        fill=\"currentColor\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n",
      "type": "registry:component",
      "target": "@components/share-menu.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/share-menu",
  "categories": [
    "menus"
  ],
  "type": "registry:component"
}