JSON Viewer Features

1"use client";
2 
3import { useState } from "react";
4import {
5  Hash,
6  Palette,
7  Scissors,
8  MousePointerClick,
9  ChevronDown
10} from "lucide-react";
11import JsonViewer from "../blocks/json-viewer";
12import { cn } from "@/lib/utils";
13import { Button } from "@/registry/8starlabs-ui/blocks/button";
14import { Input } from "@/registry/8starlabs-ui/ui/input";
15import { Label } from "@/registry/8starlabs-ui/ui/label";
16import {
17  DropdownMenu,
18  DropdownMenuTrigger,
19  DropdownMenuContent,
20  DropdownMenuRadioGroup,
21  DropdownMenuRadioItem
22} from "@/registry/8starlabs-ui/ui/dropdown-menu";
23 
24const JsonViewerFeaturesDemo = () => {
25  const [showLineNumbers, setShowLineNumbers] = useState(true);
26  const [showColorIndent, setShowColorIndent] = useState(false);
27  const [collapseOnDoubleClick, setCollapseOnDoubleClick] = useState(false);
28  const [enableTruncation, setEnableTruncation] = useState(true);
29  const [truncationLimit, setTruncationLimit] = useState(3);
30  const [defaultExpanded, setDefaultExpanded] = useState<boolean | number>(
31    false
32  );
33 
34  const jsonData = {
35    id: "0001",
36    type: "donut",
37    name: "Cake",
38    ppu: 0.55,
39    website: "https://example.com/donuts/cake",
40    primaryColor: "#FF5733",
41    secondaryColor: "rgb(255, 255, 255)",
42    createdAt: 1709251200000,
43    updatedAt: "2026-03-06T12:00:00.000Z",
44    isActive: true,
45    isGlutenFree: false,
46    discontinued: null,
47    description:
48      "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.",
49    batters: {
50      batter: [
51        { id: "1001", type: "Regular" },
52        { id: "1002", type: "Chocolate" },
53        { id: "1003", type: "Blueberry" },
54        { id: "1004", type: "Devil's Food" }
55      ]
56    },
57    topping: [
58      { id: "5001", type: "None" },
59      { id: "5002", type: "Glazed" },
60      { id: "5005", type: "Sugar" },
61      { id: "5007", type: "Powdered Sugar" },
62// … truncated