spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";3import { Badge } from "@/components/ui/badge";45type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";67const METHOD_CLASS: Record<Method, string> = {8  GET: "bg-success-soft text-success",9  POST: "bg-accent-soft text-accent",10  PUT: "bg-warning-soft text-warning",11  PATCH: "bg-warning-soft text-warning",12  DELETE: "bg-danger-soft text-danger",13};1415export function Endpoint({16  method,17  path,18  scope,19  status,20  className,21}: {22  method: Method;23  path: string;24  /** Required API key scope, if any. */25  scope?: string | null;26  status?: "Live" | "Coming soon";27  className?: string;28}) {29  return (30    <div className={cn("my-5 flex flex-wrap items-center gap-3 rounded-lg border border-border bg-bg-subtle px-3.5 py-2.5", className)}>31      <span className={cn("rounded-[5px] px-2 py-0.5 font-mono text-[12px] font-semibold tracking-wide", METHOD_CLASS[method])}>{method}</span>32      <code className="font-mono text-[13.5px] text-fg">{path}</code>33      <span className="ml-auto flex items-center gap-2">34        {scope ? (35          <span className="text-[12px] text-fg-subtle">36            scope <code className="rounded-[4px] border border-border bg-bg px-1.5 py-px font-mono text-[11.5px] text-fg-muted">{scope}</code>37          </span>38        ) : scope === null ? (39          <span className="text-[12px] text-fg-subtle">any valid key</span>40        ) : null}41        {status ? (42          <Badge variant={status === "Live" ? "success" : "warning"} dot>43            {status}44          </Badge>45        ) : null}46      </span>47    </div>48  );49}50