spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";34export interface ParamRow {5  name: string;6  type: string;7  /** Rendered in monospace. Omit for "—". */8  default?: string;9  required?: boolean;10  /** Free-form description; may contain inline components. */11  description: React.ReactNode;12  /** Small note under the type, e.g. constraints. */13  constraints?: string;14  /** Marks a field the validator accepts but the platform does not act on yet. */15  reserved?: boolean;16}1718export function ParamTable({ rows, className, caption, showDefault = true }: { rows: ParamRow[]; className?: string; caption?: string; showDefault?: boolean }) {19  return (20    <div className={cn("my-5 overflow-x-auto rounded-lg border border-border scrollbar-thin", className)}>21      <table className="w-full border-collapse text-left text-[13.5px] leading-relaxed">22        {caption ? <caption className="border-b border-border bg-bg-subtle px-3.5 py-2 text-left text-[12px] font-medium text-fg-muted">{caption}</caption> : null}23        <thead className="bg-bg-subtle text-[12px] font-medium uppercase tracking-wide text-fg-subtle">24          <tr>25            <th className="px-3.5 py-2 font-medium">Field</th>26            <th className="px-3.5 py-2 font-medium">Type</th>27            {showDefault ? <th className="px-3.5 py-2 font-medium">Default</th> : null}28            <th className="px-3.5 py-2 font-medium">Description</th>29          </tr>30        </thead>31        <tbody className="divide-y divide-border">32          {rows.map((r) => (33            <tr key={r.name} className="align-top">34              <td className="whitespace-nowrap px-3.5 py-2.5">35                <code className="font-mono text-[12.5px] font-medium text-fg">{r.name}</code>36                {r.required ? (37                  <span className="ml-1.5 align-middle text-[10.5px] font-semibold uppercase tracking-wide text-danger" title="Required">38                    required39                  </span>40                ) : null}41                {r.reserved ? (42                  <span className="ml-1.5 align-middle rounded-full bg-warning-soft px-1.5 py-px text-[10.5px] font-medium text-warning" title="Accepted by the validator but not yet active">43                    reserved44                  </span>45                ) : null}46              </td>47              <td className="px-3.5 py-2.5">48                <code className="font-mono text-[12.5px] text-fg-muted">{r.type}</code>49                {r.constraints ? <div className="mt-0.5 text-[12px] text-fg-subtle">{r.constraints}</div> : null}50              </td>51              {showDefault ? <td className="whitespace-nowrap px-3.5 py-2.5 font-mono text-[12.5px] text-fg-muted">{r.default ?? <span className="text-fg-subtle">&mdash;</span>}</td> : null}52              <td className="px-3.5 py-2.5 text-fg-muted [&_code]:rounded-[4px] [&_code]:border [&_code]:border-border [&_code]:bg-bg-muted [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[0.88em] [&_code]:text-fg">{r.description}</td>53            </tr>54          ))}55        </tbody>56      </table>57    </div>58  );59}60