{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-share",
  "title": "Social Share",
  "description": "X / LinkedIn / copy-link share bar.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@atroui/utils"
  ],
  "files": [
    {
      "path": "registry/default/blocks/social-share.tsx",
      "content": "\"use client\";\n\nimport { Check, Link2 } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SocialShareProps = {\n  url: string;\n  title: string;\n  className?: string;\n  /** Visible label - defaults to \"Share\" */\n  label?: string;\n};\n\nfunction LinkedInIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill=\"currentColor\"\n      aria-hidden\n    >\n      <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\" />\n    </svg>\n  );\n}\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill=\"currentColor\"\n      aria-hidden\n    >\n      <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\" />\n    </svg>\n  );\n}\n\nexport function SocialShare({\n  url,\n  title,\n  className,\n  label = \"Share\",\n}: SocialShareProps) {\n  const [copied, setCopied] = useState(false);\n\n  const encodedUrl = encodeURIComponent(url);\n  const encodedTitle = encodeURIComponent(title);\n\n  const copyLink = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(url);\n      setCopied(true);\n      window.setTimeout(() => setCopied(false), 2000);\n    } catch {\n      const input = document.createElement(\"input\");\n      input.value = url;\n      document.body.appendChild(input);\n      input.select();\n      document.execCommand(\"copy\");\n      document.body.removeChild(input);\n      setCopied(true);\n      window.setTimeout(() => setCopied(false), 2000);\n    }\n  }, [url]);\n\n  const shareItems = [\n    {\n      label: \"Share on X\",\n      href: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,\n      icon: XIcon,\n    },\n    {\n      label: \"Share on LinkedIn\",\n      href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,\n      icon: LinkedInIcon,\n    },\n  ] as const;\n\n  return (\n    <nav\n      aria-label={label}\n      className={cn(\n        \"flex flex-wrap items-center gap-2 border border-border-subtle bg-muted/20 px-3 py-2.5\",\n        className,\n      )}\n    >\n      <span className=\"mr-1 text-[11px] font-medium tracking-wide text-muted-foreground uppercase\">\n        {label}\n      </span>\n      {shareItems.map(({ label, href, icon: Icon }) => (\n        <a\n          key={label}\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label={label}\n          className=\"inline-flex size-9 items-center justify-center border border-border-subtle bg-background text-foreground transition-colors hover:border-brand hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon className=\"size-4\" />\n        </a>\n      ))}\n      <button\n        type=\"button\"\n        onClick={copyLink}\n        aria-label={copied ? \"Link copied\" : \"Copy link to clipboard\"}\n        className=\"inline-flex min-h-9 items-center gap-1.5 border border-border-subtle bg-background px-3 text-xs font-medium text-foreground transition-colors hover:border-brand hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-brand\" />\n        ) : (\n          <Link2 className=\"size-3.5\" />\n        )}\n        {copied ? \"Copied\" : \"Copy link\"}\n      </button>\n    </nav>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/social-share.tsx"
    }
  ],
  "type": "registry:block"
}