{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-notion-mention-link",
  "title": "Notion Mention Link Demo",
  "description": "A rich Notion-style link mention that reveals a live URL preview on hover.",
  "registryDependencies": [
    "@unlumen-ui/notion-mention-link",
    "input"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/notion-mention-link/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Input } from \"@/components/ui/input\";\nimport { NotionMentionLink } from \"@/components/unlumen-ui/notion-mention-link\";\n\ninterface NotionMentionLinkDemoProps {\n  showPreview?: boolean;\n  previewWidth?: number;\n  previewHeight?: number;\n}\n\nexport function NotionMentionLinkDemo({\n  showPreview = true,\n  previewWidth = 360,\n  previewHeight = 160,\n}: NotionMentionLinkDemoProps) {\n  const [value, setValue] = React.useState(\"desengs.com\");\n  const [previewUrl, setPreviewUrl] = React.useState(value);\n\n  React.useEffect(() => {\n    const timeout = window.setTimeout(() => {\n      setPreviewUrl(value.trim());\n    }, 500);\n\n    return () => window.clearTimeout(timeout);\n  }, [value]);\n\n  return (\n    <div className=\"flex min-h-[520px] w-full items-start justify-center px-6 py-24\">\n      <div className=\"flex w-full max-w-2xl flex-col items-start gap-5 text-left\">\n        <Input\n          value={value}\n          onChange={(event) => setValue(event.target.value)}\n          aria-label=\"Website URL\"\n          spellCheck={false}\n          style={{ width: `${Math.max(value.length + 1, 12)}ch` }}\n          className=\"h-auto max-w-full rounded-none border-0 bg-transparent p-0 text-xl text-muted-foreground underline decoration-muted-foreground/45 underline-offset-2 shadow-none outline-none focus-visible:ring-0\"\n        />\n        <NotionMentionLink\n          key={previewUrl}\n          url={previewUrl}\n          showPreview={showPreview}\n          previewWidth={previewWidth}\n          previewHeight={previewHeight}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default NotionMentionLinkDemo;\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}