Files
WorkRoot-WRNexusJSComponent/app/pages/templates/commerce.wrn
T
ClintchizandClaude Opus 5.5 c0ac38c572 feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88
- Sync app, public, scripts, test and examples from the framework's
  component-showcase: redesigned component demos, marketing blocks under
  /blocks, template and preview galleries, distinct Timeline/Section
  variants, Chat Bubble receipts, a top-placement Drawer demo, and the
  playground code panel fix (objects in array props no longer blank out).
- Standalone adaptations kept: the generator and tests read
  component-reference.json from the published @wrnexus/ui, and tests use
  the published @wrnexus/compiler and @wrnexus/syntax.
- Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88,
  styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the
  playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 16:50:22 +05:30

6 lines
2.2 KiB
Plaintext

page commerceTemplate {
state bag: number = 0
view {<nav class="example-toolbar"><a href="/templates">← All templates</a><a href="#example-source">View code</a></nav> <main style="max-width:72rem;margin:3rem auto;padding:2rem;display:grid;gap:1.5rem"><h1>Everyday essentials</h1><p>Thoughtfully made tools for your desk.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"><Button label="Add notebook" @click="bag = bag + 1" /></Card><Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"><Button label="Add organizer" @click="bag = bag + 1" /></Card><Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"><Button label="Add tumbler" @click="bag = bag + 1" /></Card></div><p role="status">Shopping bag: {bag} items</p><Button label="Clear bag" variant="secondary" @click="bag = 0" /></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page commerceTemplate <span>&#123;</span>
state bag: number = 0
view <span>&#123;</span> &lt;main style="max-width:72rem;margin:3rem auto;padding:2rem;display:grid;gap:1.5rem"&gt;&lt;h1&gt;Everyday essentials&lt;/h1&gt;&lt;p&gt;Thoughtfully made tools for your desk.&lt;/p&gt;&lt;div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"&gt;&lt;Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"&gt;&lt;Button label="Add notebook" @click="bag = bag + 1" /&gt;&lt;/Card&gt;&lt;Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"&gt;&lt;Button label="Add organizer" @click="bag = bag + 1" /&gt;&lt;/Card&gt;&lt;Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"&gt;&lt;Button label="Add tumbler" @click="bag = bag + 1" /&gt;&lt;/Card&gt;&lt;/div&gt;&lt;p role="status"&gt;Shopping bag: <span>&#123;</span>bag<span>&#125;</span> items&lt;/p&gt;&lt;Button label="Clear bag" variant="secondary" @click="bag = 0" /&gt;&lt;/main&gt; <span>&#125;</span>
<span>&#125;</span></code></pre></section> } }