{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "jsx-renderer-demo",
	"type": "registry:example",
	"registryDependencies": ["@simple-ai/jsx-renderer"],
	"files": [
		{
			"path": "./src/registry/examples/jsx-renderer-demo.tsx",
			"content": "\"use client\";\n\nimport { Calendar, Clock, Plane } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { Button } from \"@/components/ui/button\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { highlightCode } from \"@/lib/highlight-code\";\nimport { JsxRenderer } from \"@/registry/ui/jsx-renderer\";\n\nconst fullJsx = `<div className=\"max-w-xl rounded-lg border bg-card p-6\">\n  <div className=\"flex items-center gap-2 mb-6\">\n\t<Plane className=\"size-5 text-primary\" />\n\t<h2 className=\"text-xl font-semibold\">Flight Reservation</h2>\n  </div>\n  <div className=\"space-y-4 mb-6\">\n\t<div className=\"flex items-center justify-between p-3 bg-muted rounded-md\">\n\t  <div className=\"flex items-center gap-2\">\n\t\t<Calendar className=\"size-4 text-muted-foreground\" />\n\t\t<span className=\"text-sm font-medium\">Departure</span>\n\t  </div>\n\t  <span className=\"text-sm\">June 15, 2024</span>\n\t</div>\n\t<div className=\"flex items-center justify-between p-3 bg-muted rounded-md\">\n\t  <div className=\"flex items-center gap-2\">\n\t\t<Clock className=\"size-4 text-muted-foreground\" />\n\t\t<span className=\"text-sm font-medium\">Time</span>\n\t  </div>\n\t  <span className=\"text-sm\">10:30 AM</span>\n\t</div>\n\t<div className=\"flex items-center justify-between p-3 bg-muted rounded-md\">\n\t  <div>\n\t\t<div className=\"text-sm font-medium mb-1\">San Francisco (SFO)</div>\n\t\t<div className=\"text-xs text-muted-foreground\">to New York (JFK)</div>\n\t  </div>\n\t  <div className=\"text-right\">\n\t\t<div className=\"text-sm font-semibold\">$349</div>\n\t\t<div className=\"text-xs text-muted-foreground\">Economy</div>\n\t  </div>\n\t</div>\n  </div>\n  <div className=\"flex gap-2\">\n\t<Button className=\"flex-1\" onClick={() => onClickHandler(\"Select Flight\")}>Select Flight</Button>\n\t<Button variant=\"outline\" className=\"flex-1\" onClick={() => onClickHandler(\"View Details\")}>View Details</Button>\n  </div>\n</div>`;\n\nexport default function JsxRendererDemo() {\n\tconst [percentage, setPercentage] = useState([100]);\n\tconst [highlightedCode, setHighlightedCode] = useState<string>(\"\");\n\tconst partialJsx = fullJsx.slice(\n\t\t0,\n\t\tMath.floor((fullJsx.length * percentage[0]) / 100),\n\t);\n\n\tuseEffect(() => {\n\t\thighlightCode(partialJsx, \"tsx\").then(setHighlightedCode);\n\t}, [partialJsx]);\n\n\tconst onClickHandler = (value: string) => {\n\t\ttoast.success(`${value} clicked`);\n\t};\n\n\treturn (\n\t\t<div className=\"max-h-[450px] space-y-4 w-full overflow-y-auto py-4\">\n\t\t\t<Slider\n\t\t\t\tvalue={percentage}\n\t\t\t\tonValueChange={setPercentage}\n\t\t\t\tmax={100}\n\t\t\t\tstep={1}\n\t\t\t\tclassName=\"w-full\"\n\t\t\t/>\n\n\t\t\t<div className=\"border rounded-lg\">\n\t\t\t\t<JsxRenderer\n\t\t\t\t\tblacklistedAttrs={[]}\n\t\t\t\t\tjsx={partialJsx}\n\t\t\t\t\tcomponents={{ Plane, Calendar, Clock, Button }}\n\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\tbindings={{\n\t\t\t\t\t\tonClickHandler: onClickHandler,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"space-y-2\">\n\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"bg-code text-sm rounded-lg overflow-x-auto overflow-y-auto\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: highlightedCode }}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}