API Response Viewer

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7type HttpStatus =
8  | "info"
9  | "success"
10  | "redirect"
11  | "client-error"
12  | "server-error";
13 
14interface ApiResponse {
15  status: number;
16  statusText?: string;
17  headers?: Record<string, string>;
18  body?: unknown;
19  timing?: {
20    dns?: number;
21    connect?: number;
22    ttfb?: number;
23    download?: number;
24    total: number;
25  };
26}
27 
28interface ApiResponseViewerProps {
29  response: ApiResponse;
30  defaultTab?: "body" | "headers" | "timing";
31  className?: string;
32}
33 
34function getStatusType(status: number): HttpStatus {
35  if (status >= 100 && status < 200) return "info";
36  if (status >= 200 && status < 300) return "success";
37  if (status >= 300 && status < 400) return "redirect";
38  if (status >= 400 && status < 500) return "client-error";
39  return "server-error";
40}
41 
42function StatusBadge({
43  status,
44  statusText,
45}: {
46  status: number;
47  statusText?: string;
48}) {
49  const type = getStatusType(status);
50  const colors: Record<HttpStatus, string> = {
51    info: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
52    success:
53      "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300",
54    redirect:
55      "bg-yellow-100 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-300",
56    "client-error":
57      "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300",
58    "server-error": "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300",
59  };
60 
61  return (
62    <span
63      role="status"
64      aria-label={`HTTP status ${status}${statusText ? ` ${statusText}` : ""}`}
65      className={cn("px-2 py-0.5 rounded text-sm font-mono", colors[type])}
66    >
67      {status} {statusText}
68    </span>
69  );
70}
71 
72function JsonDisplay({ data }: { data: unknown }) {
73  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
74 
75  const renderValue = (
76    value: unknown,
77    path: string,
78    depth: number,
79  ): React.ReactNode => {
80    if (value === null) {
81      return <span className="text-muted-foreground italic">null</span>;
82    }
83    if (typeof value === "boolean") {
84      return <span className="text-amber-500">{String(value)}</span>;
85    }
86    if (typeof value === "number") {
87      return <span className="text-blue-500">{value}</span>;
88    }
89    if (typeof value === "string") {
90      return (
91        <span className="text-green-600 dark:text-green-400">"{value}"</span>
92      );
93    }
94    if (Array.isArray(value)) {
95// … truncated