jsx-renderer-disabled-demo

1"use client";
2 
3import { Calendar, ChefHat, Clock } from "lucide-react";
4import { JsxRenderer } from "@/registry/ui/jsx-renderer";
5 
6export default function JsxRendererDisabledDemo() {
7	const jsx = `<div className="max-w-xl rounded-lg border bg-card p-6">
8  <div className="flex items-center gap-2 mb-6">
9    <ChefHat className="size-5 text-primary" />
10    <h2 className="text-xl font-semibold">Restaurant Reservation</h2>
11  </div>
12  <div className="space-y-4 mb-6">
13    <div className="flex items-center justify-between p-3 bg-muted rounded-md">
14      <div className="flex items-center gap-2">
15        <Calendar className="size-4 text-muted-foreground" />
16        <span className="text-sm font-medium">Date</span>
17      </div>
18      <span className="text-sm">October 20, 2024</span>
19    </div>
20    <div className="flex items-center justify-between p-3 bg-muted rounded-md">
21      <div className="flex items-center gap-2">
22        <Clock className="size-4 text-muted-foreground" />
23        <span className="text-sm font-medium">Time</span>
24      </div>
25      <span className="text-sm">7:00 PM</span>
26    </div>
27    <div className="flex items-center justify-between p-3 bg-muted rounded-md">
28      <div>
29        <div className="text-sm font-medium mb-1">The Golden Spoon</div>
30        <div className="text-xs text-muted-foreground">Italian Cuisine • Downtown</div>
31      </div>
32      <div className="text-right">
33        <div className="text-sm font-semibold">4 Guests</div>
34        <div className="text-xs text-muted-foreground">Window Seat</div>
35      </div>
36    </div>
37  </div>
38  <div className="flex gap-2">
39    <button className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md font-medium">
40      Confirm Reservation
41    </button>
42    <button className="flex-1 border border-input bg-background hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-md font-medium">
43      Modify Details
44    </button>
45  </div>
46</div>`;
47 
48	return (
49		<div className="w-full">
50			<JsxRenderer
51				jsx={jsx}
52				components={{ Calendar, Clock, ChefHat }}
53				state="disabled"
54				className="w-full"
55			/>
56		</div>
57	);
58}