JSON Viewer

1"use client";
2 
3import React, { useMemo, useState } from "react";
4import type { JSX } from "react";
5import { cn } from "@/lib/utils";
6import { useIsMobile } from "@/registry/8starlabs-ui/hooks/use-mobile";
7import { Button } from "@/registry/8starlabs-ui/blocks/button";
8import {
9  Collapsible,
10  CollapsibleContent
11} from "@/registry/8starlabs-ui/ui/collapsible";
12import { Separator } from "@/registry/8starlabs-ui/ui/separator";
13import { ChevronRight } from "lucide-react";
14import { CopyButton } from "@/registry/8starlabs-ui/ui/copy-button";
15 
16interface JsonViewerProps {
17  data: Record<string, any>;
18  className?: string;
19  truncation?: Partial<TruncationSettings>;
20  showLineNumbers?: boolean;
21  showColorIndent?: boolean;
22  collapseOn?: "click" | "doubleClick";
23  defaultExpanded?: boolean | number;
24  title?: string;
25}
26 
27interface TruncationSettings {
28  enabled: boolean;
29  itemsPerArray: number;
30}
31 
32type DataType =
33  | "string"
34  | "number"
35  | "boolean"
36  | "null"
37  | "object"
38  | "array"
39  | "unknown";
40 
41const getDataType = (value: any): DataType => {
42  if (value === null) return "null";
43  if (Array.isArray(value)) return "array";
44  const type = typeof value;
45  if (
46    type === "string" ||
47    type === "number" ||
48    type === "boolean" ||
49    type === "object"
50  ) {
51    return type;
52  }
53  return "unknown";
54};
55 
56const getTypeStyle = (type: DataType): string => {
57  switch (type) {
58    case "string":
59      return "text-green-600 dark:text-green-400";
60    case "number":
61      return "text-orange-600 dark:text-orange-400";
62    case "boolean":
63      return "text-blue-600 dark:text-blue-400";
64    case "null":
65      return "text-gray-500 dark:text-gray-400";
66    default:
67      return "";
68  }
69};
70 
71const formatRelativeTime = (date: Date): string => {
72  const now = new Date();
73  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
74 
75  if (Math.abs(diffInSeconds) < 60) return "just now";
76 
77  const intervals = {
78    year: 31536000,
79    month: 2592000,
80    week: 604800,
81    day: 86400,
82    hour: 3600,
83    minute: 60
84  };
85 
86  for (const [unit, seconds] of Object.entries(intervals)) {
87    const interval = Math.floor(Math.abs(diffInSeconds) / seconds);
88    if (interval >= 1) {
89      const suffix = diffInSeconds > 0 ? "ago" : "from now";
90      return `${interval} ${unit}${interval !== 1 ? "s" : ""} ${suffix}`;
91    }
92  }
93 
94  return "just now";
95};
96 
97const detectDate = (value: any): Date | null => {
98  if (typeof value === "string") {
99// … truncated