{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "jsx-renderer-streaming-demo",
	"type": "registry:example",
	"registryDependencies": ["@simple-ai/jsx-renderer"],
	"files": [
		{
			"path": "./src/registry/examples/jsx-renderer-streaming-demo.tsx",
			"content": "\"use client\";\n\nimport { Cloud, CloudRain, Sun, Sunset } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { JsxRenderer } from \"@/registry/ui/jsx-renderer\";\n\nconst fullJsx = `<div className=\"max-w-xl rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 p-6 text-white shadow-lg\">\n  <div className=\"flex justify-between items-center mb-4\">\n\t<h2 className=\"text-2xl font-medium\">Mexico City</h2>\n\t<Sun className=\"text-yellow-300 text-4xl\" />\n  </div>\n  <div className=\"flex justify-between items-end mb-4\">\n\t<div className=\"text-6xl font-light\">\n\t  <span>47°</span>\n\t</div>\n\t<div className=\"text-right\">\n\t  <p className=\"text-sm\">Winter storm warning</p>\n\t</div>\n  </div>\n  <div className=\"grid grid-cols-6 gap-8\">\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">4PM</p>\n\t  <Sun className=\"text-yellow-300 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">46°</p>\n\t</div>\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">5PM</p>\n\t  <Sun className=\"text-yellow-300 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">44°</p>\n\t</div>\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">6PM</p>\n\t  <CloudRain className=\"text-yellow-300 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">41°</p>\n\t</div>\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">7PM</p>\n\t  <Sunset className=\"text-yellow-500 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">41°</p>\n\t</div>\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">8PM</p>\n\t  <Cloud className=\"text-gray-300 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">37°</p>\n\t</div>\n\t<div className=\"text-center flex flex-col items-center\">\n\t  <p className=\"text-sm mb-1\">9PM</p>\n\t  <Cloud className=\"text-gray-300 mb-1\" />\n\t  <p className=\"text-sm font-semibold\">35°</p>\n\t</div>\n  </div>\n</div>`;\n\nconst jsxLines = fullJsx.split(\"\\n\");\n\nexport default function JsxRendererStreamingDemo() {\n\tconst [currentLines, setCurrentLines] = useState(jsxLines.slice(0, 1)); // Start with header and current temp\n\n\tuseEffect(() => {\n\t\tconst interval = setInterval(() => {\n\t\t\tif (currentLines.length >= jsxLines.length) {\n\t\t\t\tsetCurrentLines(jsxLines.slice(0, 1));\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetCurrentLines((prev) => [...prev, jsxLines[prev.length]]);\n\t\t}, 100);\n\n\t\treturn () => clearInterval(interval);\n\t}, [currentLines.length]);\n\n\tconst currentJsx = currentLines.join(\"\\n\");\n\n\treturn (\n\t\t<div className=\"w-full\">\n\t\t\t<JsxRenderer\n\t\t\t\tjsx={currentJsx}\n\t\t\t\tcomponents={{ Cloud, Sun, CloudRain, Sunset }}\n\t\t\t\tstate=\"streaming\"\n\t\t\t\tclassName=\"w-full h-[260px]\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}