45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: String,
|
|
auth: String,
|
|
endpoints: Array, // [{ method, path, desc }]
|
|
});
|
|
|
|
const methodClass = {
|
|
GET: "text-success",
|
|
POST: "text-brandtext",
|
|
PATCH: "text-warning",
|
|
DELETE: "text-danger",
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dh-card overflow-hidden">
|
|
<div class="flex items-center justify-between border-b border-subtle px-5 py-4">
|
|
<div class="text-base font-bold tracking-[-0.02em] text-strong">{{ title }}</div>
|
|
<span class="eyebrow">{{ auth }}</span>
|
|
</div>
|
|
<table class="w-full text-left text-sm">
|
|
<thead>
|
|
<tr class="[&>th]:eyebrow [&>th]:px-5 [&>th]:py-2.5 [&>th]:font-medium">
|
|
<th>Endpoint</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="e in endpoints"
|
|
:key="e.method + e.path"
|
|
class="transition-colors hover:bg-sunken"
|
|
>
|
|
<td class="data border-t border-subtle px-5 py-2.5 text-xs whitespace-nowrap">
|
|
<span class="font-semibold" :class="methodClass[e.method]">{{ e.method }}</span>
|
|
<span class="text-strong"> {{ e.path }}</span>
|
|
</td>
|
|
<td class="border-t border-subtle px-5 py-2.5 text-body">{{ e.desc }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|