mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
27 lines
965 B
Plaintext
27 lines
965 B
Plaintext
---
|
|
// Command-palette switcher for the marketing live-demo loop. Renders the design
|
|
// vocabulary as a 4-column icon grid; the demo loop in live-demo.js opens it and
|
|
// lands on the `pick` verb.
|
|
//
|
|
// Values/labels/icons come from the same canonical source the real picker uses
|
|
// (skill/scripts/live/vocabulary.mjs), imported at build time, so the demo and
|
|
// the product never drift.
|
|
import { LIVE_COMMANDS } from '../../skill/scripts/live/vocabulary.mjs';
|
|
|
|
interface Props {
|
|
pick: string;
|
|
}
|
|
const { pick } = Astro.props;
|
|
---
|
|
|
|
<div class="live-demo-ctx-palette" data-demo-palette data-demo-pick={pick} aria-hidden="true">
|
|
<div class="live-demo-ctx-palette-grid">
|
|
{LIVE_COMMANDS.map((c) => (
|
|
<button type="button" class="live-demo-ctx-palette-chip" data-cmd={c.value}>
|
|
<span class="live-demo-ctx-palette-ico" set:html={c.icon}></span>
|
|
<span class="live-demo-ctx-palette-name">{c.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|