{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "made-with-embed",
  "title": "Made With Embed",
  "description": "Credit badge + copyable HTML snippet with editable CONTENT.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@atroui/brand"
  ],
  "files": [
    {
      "path": "registry/default/blocks/made-with-embed.tsx",
      "content": "\"use client\"\n\nimport { Check, Copy } from \"lucide-react\"\nimport { useCallback, useState } from \"react\"\n\nimport { getBrand } from \"@/lib/brand\"\n\n/**\n * Edit CONTENT for badge link, image, and copy.\n * Set siteOrigin so the HTML snippet works before hydration.\n */\nconst CONTENT = {\n  stamp: \"Credit\",\n  headline: \"Link back if it helped.\",\n  body: \"Drop this badge on your site, README, or Notion footer. Free tools stay free when people share the source.\",\n  href: \"/\",\n  /** Public URL or path to the badge image */\n  badgeSrc: \"/badge/atroui.svg\",\n  /** Used to absolutize relative href/badgeSrc in the snippet */\n  siteOrigin: \"https://www.atroui.com\",\n  badgeWidth: 160,\n  badgeHeight: 40,\n  snippetLabel: \"HTML snippet\",\n  copyLabel: \"Copy snippet\",\n  copiedLabel: \"Copied\",\n}\n\nexport type MadeWithEmbedProps = {\n  href?: string\n  badgeSrc?: string\n  brandName?: string\n  className?: string\n}\n\nfunction absolutize(pathOrUrl: string, origin: string) {\n  if (pathOrUrl.startsWith(\"http\")) return pathOrUrl\n  return `${origin.replace(/\\/$/, \"\")}${pathOrUrl.startsWith(\"/\") ? \"\" : \"/\"}${pathOrUrl}`\n}\n\nexport function MadeWithEmbed({\n  href = CONTENT.href,\n  badgeSrc = CONTENT.badgeSrc,\n  brandName,\n  className,\n}: MadeWithEmbedProps) {\n  const [copied, setCopied] = useState(false)\n  const name = brandName ?? getBrand().name\n  const alt = `Made with ${name}`\n  const target = absolutize(href, CONTENT.siteOrigin)\n  const snippetBadgeSrc = absolutize(badgeSrc, CONTENT.siteOrigin)\n  const snippet = `<a href=\"${target}\" target=\"_blank\" rel=\"noopener noreferrer\"><img src=\"${snippetBadgeSrc}\" alt=\"${alt}\" width=\"${CONTENT.badgeWidth}\" height=\"${CONTENT.badgeHeight}\" /></a>`\n\n  const copy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(snippet)\n      setCopied(true)\n      window.setTimeout(() => setCopied(false), 2000)\n    } catch {\n      setCopied(false)\n    }\n  }, [snippet])\n\n  return (\n    <div\n      className={`grid gap-6 md:grid-cols-12 md:items-start ${className ?? \"\"}`}\n    >\n      <div className=\"md:col-span-5\">\n        <p className=\"text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n          {CONTENT.stamp}\n        </p>\n        <h2 className=\"mt-4 text-2xl font-medium tracking-tight text-foreground sm:text-3xl\">\n          {CONTENT.headline}\n        </h2>\n        <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground\">\n          {CONTENT.body}\n        </p>\n        <a\n          href={href}\n          className=\"mt-6 inline-block ring-1 ring-border-subtle transition-opacity hover:opacity-90\"\n          aria-label={`${name} badge preview`}\n        >\n          <img\n            src={badgeSrc}\n            alt={alt}\n            width={CONTENT.badgeWidth}\n            height={CONTENT.badgeHeight}\n          />\n        </a>\n      </div>\n      <div className=\"md:col-span-7\">\n        <p className=\"mb-3 font-mono text-[11px] tracking-wide text-muted-foreground uppercase\">\n          {CONTENT.snippetLabel}\n        </p>\n        <pre className=\"overflow-x-auto border border-border-subtle bg-muted/30 p-4 font-mono text-[11px] leading-relaxed break-all whitespace-pre-wrap text-foreground\">\n          {snippet}\n        </pre>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className=\"mt-4 inline-flex h-11 items-center gap-2 rounded-lg bg-foreground px-5 text-sm font-medium text-background\"\n        >\n          {copied ? (\n            <>\n              <Check className=\"size-4\" aria-hidden />\n              {CONTENT.copiedLabel}\n            </>\n          ) : (\n            <>\n              <Copy className=\"size-4\" aria-hidden />\n              {CONTENT.copyLabel}\n            </>\n          )}\n        </button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/made-with-embed.tsx"
    }
  ],
  "type": "registry:block"
}