jsx-renderer-streaming-demo

1"use client";
2 
3import { Cloud, CloudRain, Sun, Sunset } from "lucide-react";
4import { useEffect, useState } from "react";
5import { JsxRenderer } from "@/registry/ui/jsx-renderer";
6 
7const fullJsx = `<div className="max-w-xl rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 p-6 text-white shadow-lg">
8  <div className="flex justify-between items-center mb-4">
9	<h2 className="text-2xl font-medium">Mexico City</h2>
10	<Sun className="text-yellow-300 text-4xl" />
11  </div>
12  <div className="flex justify-between items-end mb-4">
13	<div className="text-6xl font-light">
14	  <span>47°</span>
15	</div>
16	<div className="text-right">
17	  <p className="text-sm">Winter storm warning</p>
18	</div>
19  </div>
20  <div className="grid grid-cols-6 gap-8">
21	<div className="text-center flex flex-col items-center">
22	  <p className="text-sm mb-1">4PM</p>
23	  <Sun className="text-yellow-300 mb-1" />
24	  <p className="text-sm font-semibold">46°</p>
25	</div>
26	<div className="text-center flex flex-col items-center">
27	  <p className="text-sm mb-1">5PM</p>
28	  <Sun className="text-yellow-300 mb-1" />
29	  <p className="text-sm font-semibold">44°</p>
30	</div>
31	<div className="text-center flex flex-col items-center">
32	  <p className="text-sm mb-1">6PM</p>
33	  <CloudRain className="text-yellow-300 mb-1" />
34	  <p className="text-sm font-semibold">41°</p>
35	</div>
36	<div className="text-center flex flex-col items-center">
37	  <p className="text-sm mb-1">7PM</p>
38	  <Sunset className="text-yellow-500 mb-1" />
39	  <p className="text-sm font-semibold">41°</p>
40	</div>
41	<div className="text-center flex flex-col items-center">
42	  <p className="text-sm mb-1">8PM</p>
43	  <Cloud className="text-gray-300 mb-1" />
44	  <p className="text-sm font-semibold">37°</p>
45	</div>
46	<div className="text-center flex flex-col items-center">
47	  <p className="text-sm mb-1">9PM</p>
48	  <Cloud className="text-gray-300 mb-1" />
49	  <p className="text-sm font-semibold">35°</p>
50	</div>
51  </div>
52</div>`;
53 
54const jsxLines = fullJsx.split("\n");
55 
56export default function JsxRendererStreamingDemo() {
57	const [currentLines, setCurrentLines] = useState(jsxLines.slice(0, 1)); // Start with header and current temp
58 
59	useEffect(() => {
60		const interval = setInterval(() => {
61			if (currentLines.length >= jsxLines.length) {
62				setCurrentLines(jsxLines.slice(0, 1));
63				return;
64			}
65			setCurrentLines((prev) => [...prev, jsxLines[prev.length]]);
66		}, 100);
67 
68		return () => clearInterval(interval);
69	}, [currentLines.length]);
70 
71// … truncated