Files
WRNexusJS/examples/component-showcase/app/pages/data.wrn
T

28 lines
1.8 KiB
Plaintext

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page DataShowcase {
layout = "showcase"
seo {
title = "Data components"
description = "1 data components from @wrnexus/ui."
}
view {
<header class="showcase-hero showcase-hero--category">
<span class="showcase-eyebrow">Component category</span>
<h1 class="showcase-title">Data</h1>
<p class="showcase-description">1 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
<div class="category-meta"><span>1 components</span><span>Multiple use cases</span><span>3 live configurations</span></div>
</header>
<div class="catalog-grid">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Data</span><h2>Metric Card</h2><p>Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.</p></div>
<div class="catalog-card-footer"><span>28 props · 2 slots</span><a href="/components/metric-card">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article></div>
}
}