{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "composer",
  "title": "Composer",
  "description": "A real-time Markdown editor that renders your content as you type. Perfect for writing documentation, articles, or notes.",
  "registryDependencies": [
    "@vinkas-ui/markdown-text"
  ],
  "files": [
    {
      "path": "registry/components/blocks/composer.tsx",
      "content": "\"use client\"\n\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupTextarea } from \"@/components/ui/input-group\"\nimport { cn } from \"@/lib/utils\"\nimport { useState } from \"react\"\nimport MarkdownText from \"../ui/markdown-text\"\n\ntype ComposerProps = {\n  text?: string\n} & React.ComponentProps<\"div\">\n\nexport default function Composer({ text, className, ...props }: ComposerProps) {\n  const [markdown, setMarkdown] = useState(text || \"\")\n  return (\n    <div className={cn(\"grid grid-cols-2 gap-4 w-full\", className)} {...props}>\n      <InputGroup>\n        <InputGroupTextarea\n          placeholder=\"Write your text here. (Markdown supported)\"\n          className=\"min-h-[200px] h-full\"\n          value={markdown}\n          onChange={(e) => setMarkdown(e.target.value)}\n        />\n      </InputGroup>\n      <MarkdownText text={markdown} />\n    </div>\n  )\n}",
      "type": "registry:block",
      "target": "components/blocks/composer.tsx"
    }
  ],
  "type": "registry:block"
}