{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block-multiple-files",
  "registryDependencies": [
    "https://taki-ui.com/r/code-block.json",
    "https://taki-ui.com/r/button.json",
    "https://taki-ui.com/r/select.json"
  ],
  "files": [
    {
      "path": "registry/new-york/examples/code-block-multiple-files.tsx",
      "content": "\"use client\"\n\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockHeader,\n  CodeBlockItem,\n  CodeBlockSelect,\n  CodeBlockSelectItem,\n} from \"@/registry/new-york/ai-elements/code-block\"\n\nexport default function CodeBlockMultipleFilesDemo() {\n  const codeData = [\n    {\n      language: \"typescript\",\n      filename: \"Button.tsx\",\n      code: `import { type ReactNode } from \"react\"\n\ninterface ButtonProps {\n  children: ReactNode\n  onClick?: () => void\n  variant?: \"primary\" | \"secondary\"\n}\n\nexport function Button({ children, onClick, variant = \"primary\" }: ButtonProps) {\n  return (\n    <button\n      onClick={onClick}\n      className={\\`btn btn-\\${variant}\\`}\n    >\n      {children}\n    </button>\n  )\n}`,\n    },\n    {\n      language: \"typescript\",\n      filename: \"Input.tsx\",\n      code: `import { type InputHTMLAttributes } from \"react\"\n\ninterface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string\n  error?: string\n}\n\nexport function Input({ label, error, ...props }: InputProps) {\n  return (\n    <div className=\"input-wrapper\">\n      {label && <label>{label}</label>}\n      <input {...props} />\n      {error && <span className=\"error\">{error}</span>}\n    </div>\n  )\n}`,\n    },\n    {\n      language: \"css\",\n      filename: \"styles.css\",\n      code: `.btn {\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.btn-primary {\n  background-color: #3b82f6;\n  color: white;\n}\n\n.btn-secondary {\n  background-color: #6b7280;\n  color: white;\n}`,\n    },\n  ]\n\n  return (\n    <CodeBlock data={codeData} defaultValue={codeData[0].filename}>\n      <CodeBlockHeader>\n        <CodeBlockFiles>\n          {(item) => (\n            <CodeBlockFilename key={item.filename} value={item.filename}>\n              {item.filename}\n            </CodeBlockFilename>\n          )}\n        </CodeBlockFiles>\n        <CodeBlockSelect>\n          {(item) => (\n            <CodeBlockSelectItem key={item.filename} id={item.filename}>\n              {item.filename}\n            </CodeBlockSelectItem>\n          )}\n        </CodeBlockSelect>\n        <CodeBlockCopyButton\n          onCopy={() => console.log(\"Copied code to clipboard\")}\n          onError={() => console.error(\"Failed to copy code to clipboard\")}\n        />\n      </CodeBlockHeader>\n      <CodeBlockBody>\n        {(item) => (\n          <CodeBlockItem key={item.filename} value={item.filename}>\n            <CodeBlockContent language={item.language as any}>\n              {item.code}\n            </CodeBlockContent>\n          </CodeBlockItem>\n        )}\n      </CodeBlockBody>\n    </CodeBlock>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}