jsx-renderer-demo

1"use client";
2 
3import { Calendar, Clock, Plane } from "lucide-react";
4import { useEffect, useState } from "react";
5import { toast } from "sonner";
6import { Button } from "@/components/ui/button";
7import { Slider } from "@/components/ui/slider";
8import { highlightCode } from "@/lib/highlight-code";
9import { JsxRenderer } from "@/registry/ui/jsx-renderer";
10 
11const fullJsx = `<div className="max-w-xl rounded-lg border bg-card p-6">
12  <div className="flex items-center gap-2 mb-6">
13	<Plane className="size-5 text-primary" />
14	<h2 className="text-xl font-semibold">Flight Reservation</h2>
15  </div>
16  <div className="space-y-4 mb-6">
17	<div className="flex items-center justify-between p-3 bg-muted rounded-md">
18	  <div className="flex items-center gap-2">
19		<Calendar className="size-4 text-muted-foreground" />
20		<span className="text-sm font-medium">Departure</span>
21	  </div>
22	  <span className="text-sm">June 15, 2024</span>
23	</div>
24	<div className="flex items-center justify-between p-3 bg-muted rounded-md">
25	  <div className="flex items-center gap-2">
26		<Clock className="size-4 text-muted-foreground" />
27		<span className="text-sm font-medium">Time</span>
28	  </div>
29	  <span className="text-sm">10:30 AM</span>
30	</div>
31	<div className="flex items-center justify-between p-3 bg-muted rounded-md">
32	  <div>
33		<div className="text-sm font-medium mb-1">San Francisco (SFO)</div>
34		<div className="text-xs text-muted-foreground">to New York (JFK)</div>
35	  </div>
36	  <div className="text-right">
37		<div className="text-sm font-semibold">$349</div>
38		<div className="text-xs text-muted-foreground">Economy</div>
39	  </div>
40	</div>
41  </div>
42  <div className="flex gap-2">
43	<Button className="flex-1" onClick={() => onClickHandler("Select Flight")}>Select Flight</Button>
44	<Button variant="outline" className="flex-1" onClick={() => onClickHandler("View Details")}>View Details</Button>
45  </div>
46</div>`;
47 
48export default function JsxRendererDemo() {
49	const [percentage, setPercentage] = useState([100]);
50	const [highlightedCode, setHighlightedCode] = useState<string>("");
51	const partialJsx = fullJsx.slice(
52		0,
53		Math.floor((fullJsx.length * percentage[0]) / 100),
54	);
55 
56	useEffect(() => {
57		highlightCode(partialJsx, "tsx").then(setHighlightedCode);
58	}, [partialJsx]);
59 
60	const onClickHandler = (value: string) => {
61		toast.success(`${value} clicked`);
62	};
63 
64	return (
65		<div className="max-h-[450px] space-y-4 w-full overflow-y-auto py-4">
66			<Slider
67				value={percentage}
68// … truncated