ApiEndpointCard

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ApiEndpointCard
  method="GET"
  path="/api/example"
  eyebrow="eyebrow"
  title="title"
  description="description"
/>

Legacy mount name: data-component="ApiEndpointCard".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ApiEndpointCard.wrn

component ApiEndpointCard {
    props {
        class = ""
        method = "GET"
        path = "/api/example"
        eyebrow = ""
        title = ""
        description = ""
        href = ""
        actionLabel = "View endpoint"
    }

    view {
        <article
            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
        >
        <div class="flex flex-wrap items-center gap-3" >
        <span
                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
                >
                    {method}
                </span>
        <code class="text-sm font-semibold">
                    {title || path}
                </code>
        </div>
        <p
                data-show="description"
                class="mt-3 text-sm text-slate-500"
            >
                {description}
            </p>
        <div class="mt-4">
        <slot />
        </div>
            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true">
        </span>
        </a>{/if}
        </article>
    }
}