spb/fetcha

1import * as React from "react";2import { CodeBlock, type CodeLang } from "@/components/ui/code-block";3import { cn } from "@/lib/utils";45/**6 * Renders an API response. Accepts either a JSON-serialisable value or a pre-formatted string.7 * The status line is coloured by class (2xx success, 4xx warning, 5xx danger).8 */9export function ResponseExample({10  status = 200,11  statusText,12  body,13  lang = "json",14  title,15  className,16  maxHeight = 480,17}: {18  status?: number;19  statusText?: string;20  body: unknown;21  lang?: CodeLang;22  title?: string;23  className?: string;24  maxHeight?: number | string;25}) {26  const code = typeof body === "string" ? body : JSON.stringify(body, null, 2);27  const label = title ?? `${status}${statusText ? ` ${statusText}` : status === 200 ? " OK" : ""}`;28  const tone = status >= 500 ? "danger" : status >= 400 ? "warning" : "success";29  return (30    <div className={cn("my-5", className)}>31      <CodeBlock32        code={code}33        lang={lang}34        title={label}35        maxHeight={maxHeight}36        className={cn(37          "[&>div:first-child>span]:font-medium",38          tone === "success" && "[&>div:first-child>span]:text-success",39          tone === "warning" && "[&>div:first-child>span]:text-warning",40          tone === "danger" && "[&>div:first-child>span]:text-danger",41        )}42      />43    </div>44  );45}46