WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 16 Packages Projects Releases Wiki Activity
Files
358a520bc541476884cfc355d63999509df0d122
WRNexusJS/examples/component-showcase/app/pages/layout.wrn
T
Clintchiz 358a520bc5 release: WRNexusJS 0.5.14
2026-07-30 21:29:25 +05:30

188 lines
18 KiB
Plaintext
Raw Blame History

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page LayoutShowcase {
layout = "showcase"
seo {
title = "Layout components"
description = "17 layout components from @wrnexus/ui."
}
view {
<header class="showcase-hero showcase-hero--category">
<span class="showcase-eyebrow">Component category</span>
<h1 class="showcase-title">Layout</h1>
<p class="showcase-description">17 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
<div class="category-meta"><span>17 components</span><span>Multiple use cases</span><span>51 live configurations</span></div>
</header>
<div class="catalog-grid">
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="AuthSplitLayout" size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--1"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Auth Split Layout</h2><p>Responsive 50/50 authentication layout with content and form regions.</p></div>
<div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/auth-split-layout">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Columns" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/columns">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Container" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/container">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="CustomScrollbar" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Custom Scrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/custom-scrollbar">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Divider" size="default" label="Divider" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p></div>
<div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/divider">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Responsive equal-height grid for feature and service cards.</p></div>
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/feature-grid">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Grid" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/grid">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Image" size="default" rounded="false" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p></div>
<div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/image">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Kbd" size="default" label="Kbd" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p></div>
<div class="catalog-card-footer"><span>4 props · 1 slots</span><a href="/components/kbd">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="LayoutSplitter" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Layout Splitter</h2><p>Theme-aware, responsive layout splitter component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/layout-splitter">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Link" size="default" label="Link" href="#link-demo" external="false" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p></div>
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/link">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-0-1&quot;,&quot;key&quot;:&quot;metric-grid-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-0-2&quot;,&quot;key&quot;:&quot;metric-grid-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Metric Grid</h2><p>Responsive collection of metric cards.</p></div>
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/metric-grid">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="PublicPageShell" fullWidth="false" size="default" variant="default" class="showcase-instance showcase-instance--1"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Consistent structural wrapper for public-facing pages.</p></div>
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/public-page-shell">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Theme-aware page section with consistent spacing, width, background, and border controls.</p></div>
<div class="catalog-card-footer"><span>10 props · 1 slots</span><a href="/components/section">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p></div>
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/section-header">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Text Link</h2><p>Styled inline action link with icons, arrows, external state, and disabled handling.</p></div>
<div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/text-link">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Typography" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p></div>
<div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/typography">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article></div>
}
}
Reference in New Issue View Git Blame Copy Permalink