refactor(docs): remove card shells and format examples
This commit is contained in:
@@ -13,7 +13,13 @@ page ApiEndpointCardcomponent {
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.65</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiEndpointCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiEndpointCard</h1><p>Reusable api endpoint card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.65</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiEndpointCard method="GET" path="/api/example" eyebrow="eyebrow" title="title" description="description" /></code></pre><p>Legacy mount name: <code>data-component="ApiEndpointCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>"GET"</code></td></tr><tr><td><code>path</code></td><td><code>string</code></td><td>Optional</td><td><code>"/api/example"</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"View endpoint"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiEndpointCard.wrn</code></p><pre data-language="wrn"><code>component ApiEndpointCard {
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ApiEndpointCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiEndpointCard</h1><p>Reusable api endpoint card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.2.65</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ApiEndpointCard
|
||||
method="GET"
|
||||
path="/api/example"
|
||||
eyebrow="eyebrow"
|
||||
title="title"
|
||||
description="description"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiEndpointCard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>"GET"</code></td></tr><tr><td><code>path</code></td><td><code>string</code></td><td>Optional</td><td><code>"/api/example"</code></td></tr><tr><td><code>eyebrow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"View endpoint"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ApiEndpointCard.wrn</code></p><pre data-language="wrn"><code>component ApiEndpointCard {
|
||||
props {
|
||||
class = ""
|
||||
method = "GET"
|
||||
@@ -29,26 +35,28 @@ page ApiEndpointCardcomponent {
|
||||
<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
|
||||
<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">
|
||||
<code class="text-sm font-semibold">
|
||||
{title || path}
|
||||
</code>
|
||||
</div>
|
||||
<p
|
||||
</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}
|
||||
<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>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user