openwaters.io/website/src/components/api/ApiEndpoint.astro at 36beda19198103a751ad24358fbb167ddb5afab7 · openwatersio/openwaters.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
---
import type { EndpointInfo } from "../../utils/openapi";
import Card from "../ui/Card.astro";
import { API_HOST } from "../../utils/constants.ts";

interface Props {
  endpoint: EndpointInfo;
}

const { endpoint } = Astro.props;

const methodColors: Record<string, string> = {
  GET: "bg-(--status-green-bg) text-(--status-green-text)",
  POST: "bg-(--status-blue-bg) text-(--status-blue-text)",
  PUT: "bg-(--status-yellow-bg) text-(--status-yellow-text)",
  PATCH: "bg-(--status-orange-bg) text-(--status-orange-text)",
  DELETE: "bg-(--status-red-bg) text-(--status-red-text)",
};

// Get example response from first successful response
const successResponse = Object.entries(endpoint.responses).find(([code]) =>
  code.startsWith("2"),
)?.[1];
const exampleResponse =
  successResponse && "content" in successResponse
    ? successResponse.content?.["application/json"]?.example
    : null;
---

<Card class="mb-6">
  <div class="space-y-4">
    <!-- Method and Path -->
    <div class="flex items-center gap-3">
      <span
        class={`rounded px-2 py-1 text-xs font-bold ${methodColors[endpoint.method] || "bg-(--surface-subtle) text-(--text)"}`}
      >
        {endpoint.method}
      </span>
      <span class="font-mono text-sm">{API_HOST}{endpoint.path}</span>
    </div>

    <!-- Summary and Description -->
    {endpoint.summary && <p>{endpoint.summary}</p>}
    {endpoint.description && <p>{endpoint.description}</p>}

    <!-- Parameters -->
    {
      endpoint.parameters && endpoint.parameters.length > 0 && (
        <div>
          <h4 class="mb-0 text-lg">Parameters</h4>
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead class="bg-(--surface-subtle)">
                <tr>
                  <th class="w-32 px-3 py-2 text-left">Name</th>
                  <th class="w-20 px-3 py-2 text-left">Location</th>
                  <th class="w-20 px-3 py-2 text-left">Type</th>
                  <th class="w-18 px-3 py-2 text-left">Required</th>
                  <th class="px-3 py-2 text-left">Description</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-(--border-subtle)">
                {endpoint.parameters.map((param) => (
                  <tr>
                    <td class="px-3 py-2 font-mono">{param.name}</td>
                    <td class="px-3 py-2">
                      <span class="rounded bg-(--surface-subtle) px-2 py-1 text-xs">
                        {param.in}
                      </span>
                    </td>
                    <td class="px-3 py-2 font-mono text-xs">
                      {param.schema && "type" in param.schema
                        ? param.schema.type
                        : ""}
                    </td>
                    <td class="px-3 py-2">
                      {param.required ? (
                        <span class="text-red-600">✓</span>
                      ) : (
                        <span class="text-navy-400">—</span>
                      )}
                    </td>
                    <td class="px-3 py-2 text-(--text-secondary)">
                      {param.description}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )
    }

    <!-- Example Response -->
    {
      exampleResponse && (
        <div>
          <h4>Example Response</h4>
          <div class="bg-navy-900 overflow-x-auto rounded-lg p-4 text-white">
            <pre class="text-sm">
              <code>{JSON.stringify(exampleResponse, null, 2)}</code>
            </pre>
          </div>
        </div>
      )
    }
  </div>
</Card>