{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block-interactive-demo",
  "registryDependencies": [
    "@delta/code-block"
  ],
  "files": [
    {
      "path": "examples/code-block-interactive-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { PrismTheme } from \"prism-react-renderer\"\n\nimport { CodeBlock } from \"@/components/ui/code-block\"\n\n// 5 Popular Prism Themes\nconst atomDarkTheme: PrismTheme = {\n  plain: {\n    color: \"#c5c8c6\",\n    backgroundColor: \"#1d1f21\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"doctype\", \"cdata\"],\n      style: {\n        color: \"#7C7C7C\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: [\"string\", \"attr-value\"],\n      style: {\n        color: \"#A8FF60\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"operator\"],\n      style: {\n        color: \"#6C6C6C\",\n      },\n    },\n    {\n      types: [\n        \"entity\",\n        \"url\",\n        \"symbol\",\n        \"number\",\n        \"boolean\",\n        \"variable\",\n        \"constant\",\n        \"property\",\n        \"regex\",\n        \"inserted\",\n      ],\n      style: {\n        color: \"#AE81FF\",\n      },\n    },\n    {\n      types: [\"atrule\", \"keyword\", \"attr-name\", \"selector\"],\n      style: {\n        color: \"#FF6C6B\",\n      },\n    },\n    {\n      types: [\"function\", \"deleted\", \"tag\"],\n      style: {\n        color: \"#A8FF60\",\n      },\n    },\n    {\n      types: [\"function-variable\"],\n      style: {\n        color: \"#6196CC\",\n      },\n    },\n    {\n      types: [\"tag\", \"selector\", \"keyword\"],\n      style: {\n        color: \"#FF6C6B\",\n      },\n    },\n  ],\n}\n\nconst draculaTheme: PrismTheme = {\n  plain: {\n    color: \"#F8F8F2\",\n    backgroundColor: \"#282A36\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"doctype\", \"cdata\"],\n      style: {\n        color: \"#6272A4\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: [\"string\", \"attr-value\"],\n      style: {\n        color: \"#F1FA8C\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"operator\"],\n      style: {\n        color: \"#F8F8F2\",\n      },\n    },\n    {\n      types: [\n        \"entity\",\n        \"url\",\n        \"symbol\",\n        \"number\",\n        \"boolean\",\n        \"variable\",\n        \"constant\",\n        \"property\",\n        \"regex\",\n        \"inserted\",\n      ],\n      style: {\n        color: \"#BD93F9\",\n      },\n    },\n    {\n      types: [\"atrule\", \"keyword\", \"attr-name\", \"selector\"],\n      style: {\n        color: \"#FF79C6\",\n      },\n    },\n    {\n      types: [\"function\", \"deleted\", \"tag\"],\n      style: {\n        color: \"#50FA7B\",\n      },\n    },\n    {\n      types: [\"function-variable\"],\n      style: {\n        color: \"#8BE9FD\",\n      },\n    },\n    {\n      types: [\"tag\", \"selector\", \"keyword\"],\n      style: {\n        color: \"#FF79C6\",\n      },\n    },\n  ],\n}\n\nconst nightOwlTheme: PrismTheme = {\n  plain: {\n    color: \"#d6deeb\",\n    backgroundColor: \"#011627\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"cdata\"],\n      style: {\n        color: \"#637777\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"punctuation\"],\n      style: {\n        color: \"#c792ea\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        color: \"#b2ccd6\",\n      },\n    },\n    {\n      types: [\"deleted\"],\n      style: {\n        color: \"#EF535090\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"symbol\", \"property\"],\n      style: {\n        color: \"#80CBC4\",\n      },\n    },\n    {\n      types: [\"tag\", \"operator\", \"keyword\"],\n      style: {\n        color: \"#7fdbca\",\n      },\n    },\n    {\n      types: [\"boolean\"],\n      style: {\n        color: \"#ff5874\",\n      },\n    },\n    {\n      types: [\"number\"],\n      style: {\n        color: \"#F78C6C\",\n      },\n    },\n    {\n      types: [\"constant\", \"function\", \"builtin\", \"char\"],\n      style: {\n        color: \"#82AAFF\",\n      },\n    },\n    {\n      types: [\"selector\", \"doctype\"],\n      style: {\n        color: \"#c792ea\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"class-name\"],\n      style: {\n        color: \"#FFCB8B\",\n      },\n    },\n    {\n      types: [\"tag\"],\n      style: {\n        color: \"#7fdbca\",\n      },\n    },\n    {\n      types: [\"attr-name\"],\n      style: {\n        color: \"#7fdbca\",\n      },\n    },\n    {\n      types: [\"attr-value\"],\n      style: {\n        color: \"#addb67\",\n      },\n    },\n    {\n      types: [\"string\", \"url\"],\n      style: {\n        color: \"#addb67\",\n      },\n    },\n    {\n      types: [\"variable\"],\n      style: {\n        color: \"#d6deeb\",\n      },\n    },\n    {\n      types: [\"inserted\"],\n      style: {\n        color: \"#addb67\",\n        fontStyle: \"italic\",\n      },\n    },\n  ],\n}\n\nconst githubLightTheme: PrismTheme = {\n  plain: {\n    color: \"#24292e\",\n    backgroundColor: \"#ffffff\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"doctype\", \"cdata\"],\n      style: {\n        color: \"#6a737d\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: [\"string\", \"attr-value\"],\n      style: {\n        color: \"#032f62\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"operator\"],\n      style: {\n        color: \"#24292e\",\n      },\n    },\n    {\n      types: [\n        \"entity\",\n        \"url\",\n        \"symbol\",\n        \"number\",\n        \"boolean\",\n        \"variable\",\n        \"constant\",\n        \"property\",\n        \"regex\",\n        \"inserted\",\n      ],\n      style: {\n        color: \"#005cc5\",\n      },\n    },\n    {\n      types: [\"atrule\", \"keyword\", \"attr-name\", \"selector\"],\n      style: {\n        color: \"#d73a49\",\n      },\n    },\n    {\n      types: [\"function\", \"deleted\", \"tag\"],\n      style: {\n        color: \"#6f42c1\",\n      },\n    },\n    {\n      types: [\"function-variable\"],\n      style: {\n        color: \"#e36209\",\n      },\n    },\n    {\n      types: [\"tag\", \"selector\", \"keyword\"],\n      style: {\n        color: \"#d73a49\",\n      },\n    },\n  ],\n}\n\nconst prismLightTheme: PrismTheme = {\n  plain: {\n    color: \"#000\",\n    backgroundColor: \"#f5f2f0\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"doctype\", \"cdata\"],\n      style: {\n        color: \"#708090\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: [\"string\", \"attr-value\"],\n      style: {\n        color: \"#690\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"operator\"],\n      style: {\n        color: \"#999999\",\n      },\n    },\n    {\n      types: [\n        \"entity\",\n        \"url\",\n        \"symbol\",\n        \"number\",\n        \"boolean\",\n        \"variable\",\n        \"constant\",\n        \"property\",\n        \"regex\",\n        \"inserted\",\n      ],\n      style: {\n        color: \"#905\",\n      },\n    },\n    {\n      types: [\"atrule\", \"keyword\", \"attr-name\", \"selector\"],\n      style: {\n        color: \"#07a\",\n      },\n    },\n    {\n      types: [\"function\", \"deleted\", \"tag\"],\n      style: {\n        color: \"#DD4A68\",\n      },\n    },\n    {\n      types: [\"function-variable\"],\n      style: {\n        color: \"#e90\",\n      },\n    },\n    {\n      types: [\"tag\", \"selector\", \"keyword\"],\n      style: {\n        color: \"#07a\",\n      },\n    },\n  ],\n}\n\nconst solarizedLightTheme: PrismTheme = {\n  plain: {\n    color: \"#657b83\",\n    backgroundColor: \"#fdf6e3\",\n  },\n  styles: [\n    {\n      types: [\"comment\", \"prolog\", \"doctype\", \"cdata\"],\n      style: {\n        color: \"#93a1a1\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"namespace\"],\n      style: {\n        opacity: 0.7,\n      },\n    },\n    {\n      types: [\"string\", \"attr-value\"],\n      style: {\n        color: \"#2aa198\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"operator\"],\n      style: {\n        color: \"#586e75\",\n      },\n    },\n    {\n      types: [\n        \"entity\",\n        \"url\",\n        \"symbol\",\n        \"number\",\n        \"boolean\",\n        \"variable\",\n        \"constant\",\n        \"property\",\n        \"regex\",\n        \"inserted\",\n      ],\n      style: {\n        color: \"#2aa198\",\n      },\n    },\n    {\n      types: [\"atrule\", \"keyword\", \"attr-name\", \"selector\"],\n      style: {\n        color: \"#859900\",\n      },\n    },\n    {\n      types: [\"function\", \"deleted\", \"tag\"],\n      style: {\n        color: \"#268bd2\",\n      },\n    },\n    {\n      types: [\"function-variable\"],\n      style: {\n        color: \"#b58900\",\n      },\n    },\n    {\n      types: [\"tag\", \"selector\", \"keyword\"],\n      style: {\n        color: \"#859900\",\n      },\n    },\n    {\n      types: [\"important\", \"bold\"],\n      style: {\n        fontWeight: \"bold\",\n      },\n    },\n    {\n      types: [\"italic\"],\n      style: {\n        fontStyle: \"italic\",\n      },\n    },\n  ],\n}\n\nconst themes = [\n  { name: \"GitHub Light\", theme: githubLightTheme },\n  { name: \"Prism Light\", theme: prismLightTheme },\n  { name: \"Solarized Light\", theme: solarizedLightTheme },\n  { name: \"Atom Dark\", theme: atomDarkTheme },\n  { name: \"Dracula\", theme: draculaTheme },\n  { name: \"Night Owl\", theme: nightOwlTheme },\n]\n\nconst goCode = `package main\n\nimport \"fmt\"\n\nfunc main() {\n    fmt.Println(\"Hello, World!\")\n}`\n\nexport default function CodeBlockInteractiveDemo() {\n  const [currentThemeIndex, setCurrentThemeIndex] = useState(0)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentThemeIndex((prev) => (prev + 1) % themes.length)\n    }, 1000)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  const currentTheme = themes[currentThemeIndex]\n\n  return (\n    <div className=\"w-full max-w-md\">\n      <CodeBlock\n        code={goCode}\n        language=\"go\"\n        showLineNumbers={true}\n        useThemeBackground={true}\n        adaptiveTheme={{\n          dark: currentTheme.theme,\n          light: currentTheme.theme,\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}