JSON Viewer

1"use client";
2 
3import JsonViewer from "../blocks/json-viewer";
4 
5const JsonViewerDemo = () => {
6  const jsonData = {
7    id: "0001",
8    type: "donut",
9    name: "Cake",
10    ppu: 0.55,
11    website: "https://example.com/donuts/cake",
12    primaryColor: "#FF5733",
13    secondaryColor: "rgb(255, 255, 255)",
14    createdAt: 1709251200000,
15    updatedAt: "2026-03-06T12:00:00.000Z",
16    isActive: true,
17    isGlutenFree: false,
18    discontinued: null,
19    description:
20      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis tellus eu justo hendrerit, a viverra turpis aliquam. Morbi sollicitudin accumsan lectus, eget sollicitudin magna tempus et. Cras fringilla risus sed libero consequat faucibus. Nulla facilisi. Quisque pretium, lorem id dignissim iaculis, est sem aliquet risus, sed suscipit elit sem sit amet dui. Vivamus tempor orci nec imperdiet molestie. Integer elit ex, elementum sed libero vitae, varius porta nisi. Pellentesque eget nibh justo. Morbi nec cursus metus, et faucibus nunc. Quisque vehicula sollicitudin ipsum, laoreet aliquam libero lobortis nec. Nulla facilisi.",
21    batters: {
22      batter: [
23        { id: "1001", type: "Regular" },
24        { id: "1002", type: "Chocolate" },
25        { id: "1003", type: "Blueberry" },
26        { id: "1004", type: "Devil's Food" }
27      ]
28    },
29    topping: [
30      { id: "5001", type: "None" },
31      { id: "5002", type: "Glazed" },
32      { id: "5005", type: "Sugar" },
33      { id: "5007", type: "Powdered Sugar" },
34      { id: "5006", type: "Chocolate with Sprinkles" },
35      { id: "5003", type: "Chocolate" },
36      { id: "5004", type: "Maple" }
37    ]
38  };
39 
40  return (
41    <JsonViewer data={jsonData} className="h-[500px]" title="Response Data" />
42  );
43};
44 
45export default JsonViewerDemo;