feat(ui): add professional visual fallbacks
This commit is contained in:
@@ -9,5 +9,7 @@ component AccessibleChartSummary {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component AnalyticsDashboardPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center justify-between"><span class="text-sm font-semibold">Delivery trend</span><span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500"><span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>18.4%</span></div><svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible"><defs><linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="currentColor" stop-opacity="0.28"></stop><stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g stroke="currentColor" stroke-opacity="0.12"><path d="M0 30H600M0 80H600M0 130H600M0 180H600"></path></g><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500"></path><path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500"></path><g fill="currentColor" class="text-violet-500"><circle cx="124" cy="126" r="5"></circle><circle cx="255" cy="103" r="5"></circle><circle cx="392" cy="98" r="5"></circle><circle cx="515" cy="74" r="5"></circle><circle cx="600" cy="30" r="6"></circle></g></svg><div class="flex justify-between text-[0.6875rem] text-slate-500"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,11 @@ component ApiEndpointCard {
|
||||
class = ""
|
||||
method = "GET"
|
||||
path = "/api/example"
|
||||
eyebrow = ""
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
actionLabel = "View endpoint"
|
||||
}
|
||||
|
||||
view {
|
||||
@@ -17,7 +21,7 @@ component ApiEndpointCard {
|
||||
{method}
|
||||
</span>
|
||||
<code class="text-sm font-semibold">
|
||||
{path}
|
||||
{title || path}
|
||||
</code>
|
||||
</div>
|
||||
<p
|
||||
@@ -29,6 +33,7 @@ component ApiEndpointCard {
|
||||
<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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component CampaignCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--send]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component ChannelCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--radio-tower]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--channel {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,6 +7,6 @@ component CodeBlock {
|
||||
}
|
||||
state copied = false
|
||||
view {
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 {class}"><div class="flex min-h-11 items-center justify-between border-b border-slate-800 px-4 text-xs text-slate-400"><span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="rounded-lg px-2 py-1 hover:bg-slate-800">{copied ? 'Copied' : 'Copy'}</button></div><pre class="overflow-x-auto p-4 text-sm leading-6"><code>{code}</code></pre></div>
|
||||
<div class="min-w-0 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950 text-slate-100 shadow-2xl shadow-slate-950/20 {class}"><div class="flex min-h-12 items-center justify-between gap-4 border-b border-slate-800 px-4 text-xs text-slate-400"><span class="inline-flex min-w-0 items-center gap-2 truncate"><span class="icon-[lucide--terminal] size-4 shrink-0" aria-hidden="true"></span>{filename || language}</span><button type="button" @click="navigator.clipboard.writeText(code); copied = true" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-700 px-2.5 py-1.5 font-semibold text-slate-300 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white"><span class="{copied ? 'icon-[lucide--check]' : 'icon-[lucide--copy]'} size-3.5" aria-hidden="true"></span>{copied ? 'Copied' : 'Copy'}</button></div><pre class="m-0 max-w-full overflow-x-auto whitespace-pre-wrap break-words p-5 font-mono text-[0.8125rem] leading-6 sm:whitespace-pre"><code>{code}</code></pre></div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConsentTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Consent history showing allowed and suppressed customer channels" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3"><span class="icon-[lucide--message-circle-check] size-5 text-emerald-500" aria-hidden="true"></span><span class="grid text-sm"><strong>WhatsApp allowed</strong><span class="text-xs text-slate-500">Web form · 12 Jul, 10:24</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--mail-check] size-5 text-violet-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Email allowed</strong><span class="text-xs text-slate-500">Preference centre · 08 Jul</span></span><span class="ml-auto text-xs font-bold text-emerald-600">Active</span></div><div class="flex items-center gap-3 rounded-xl border border-rose-500/20 bg-rose-500/5 p-3"><span class="icon-[lucide--phone-off] size-5 text-rose-500" aria-hidden="true"></span><span class="grid text-sm"><strong>Voice suppressed</strong><span class="text-xs text-slate-500">Customer request · 02 Jul</span></span><span class="ml-auto text-xs font-bold text-rose-500">Blocked</span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component ConversationPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Shared inbox conversation moving from automation to a human teammate" class="grid min-h-52 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-3 border-b border-slate-200 pb-3 dark:border-slate-800"><span class="grid size-9 place-items-center rounded-full bg-violet-500/10 text-violet-500"><span class="icon-[lucide--message-circle] size-4" aria-hidden="true"></span></span><span class="grid text-sm"><strong>Order support</strong><span class="text-xs text-slate-500">Customer context attached</span></span><span class="ml-auto size-2 rounded-full bg-emerald-500"></span></div><div class="max-w-[82%] rounded-2xl rounded-tl-sm bg-white p-3 text-sm shadow-sm dark:bg-slate-900">Can I change the delivery address?</div><div class="ml-auto max-w-[82%] rounded-2xl rounded-tr-sm bg-violet-600 p-3 text-sm text-white">Absolutely — I’ll help with that now.</div><div class="inline-flex items-center gap-2 text-xs text-slate-500"><span class="icon-[lucide--bot] size-4" aria-hidden="true"></span>Automation handed off to Maya</div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
component FeatureCard {
|
||||
props {
|
||||
class = ""
|
||||
icon = "✦"
|
||||
icon = "icon-[lucide--sparkles]"
|
||||
title = "Feature"
|
||||
description = ""
|
||||
href = ""
|
||||
}
|
||||
view {
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl bg-violet-100 text-xl text-violet-700 transition group-hover:scale-110 dark:bg-violet-950 dark:text-violet-300">{icon}</div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p><a data-show="href" href="{href}" class="mt-4 inline-flex font-semibold text-violet-600">Learn more →</a></article>
|
||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}"><div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300"><span class="{icon} size-5" aria-hidden="true"></span></div><h3 class="mt-5 text-lg font-bold">{title}</h3><p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component FeatureChecklist {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="presentation" class="grid grid-cols-[auto_1fr] gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><span class="grid size-10 place-items-center rounded-xl bg-violet-500/10 text-violet-500"><span class="icon-[lucide--list-checks] size-5" aria-hidden="true"></span></span><div class="grid gap-2"><span class="h-2 w-4/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-3/5 rounded-full bg-slate-200 dark:bg-slate-800"></span><span class="h-2 w-2/3 rounded-full bg-slate-200 dark:bg-slate-800"></span></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ component IntegrationCard {
|
||||
title = ""
|
||||
description = ""
|
||||
href = ""
|
||||
icon = "icon-[lucide--plug-zap]"
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
||||
view { <article class="wire-card wire-catalog-card wire-catalog-card--integration {class}"><span class="wire-catalog-card__icon"><span class="{icon} size-5" aria-hidden="true"></span></span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a>{/if}</article> }
|
||||
}
|
||||
|
||||
@@ -7,5 +7,7 @@ component SectionActions {
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
view { <span class="wire-catalog-action {class}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></span> }
|
||||
view {
|
||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,5 +7,5 @@ component SmartRouteDiagram {
|
||||
loading = false
|
||||
class = ""
|
||||
}
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
|
||||
view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption>{#if title}<strong>{title}</strong>{/if}{#if value}<span class="wire-metric__value">{value}</span>{/if}{#if description}<span class="wire-muted">{description}</span>{/if}</figcaption>{#if loading}<div class="wire-skeleton wire-catalog-visualization__skeleton"></div>{:else}<div class="wire-catalog-visualization__content"><slot /></div>{/if}{#if summary}<p class="wire-visually-hidden">{summary}</p>{/if}</figure> }
|
||||
}
|
||||
|
||||
@@ -6,5 +6,10 @@ component TrustBadgeList {
|
||||
emptyText = "No items available."
|
||||
class = ""
|
||||
}
|
||||
view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
|
||||
view {
|
||||
<section class="wire-catalog-collection {class}">
|
||||
{#if title || description}<header>{#if title}<h2>{title}</h2>{/if}{#if description}<p>{description}</p>{/if}</header>{/if}
|
||||
{#if empty}<p role="status" class="wire-muted">{emptyText}</p>{:else}<div role="list" class="wire-catalog-collection__items"><slot /></div>{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,7 @@ component UnifiedTimelinePreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Unified customer timeline across automated and human interactions" class="grid min-h-52 gap-0 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-violet-500/10 text-violet-500"><span class="icon-[lucide--zap] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Workflow triggered</strong><span class="text-xs text-slate-500">Order status changed</span></span><time class="text-xs text-slate-500">09:42</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-emerald-500/10 text-emerald-500"><span class="icon-[lucide--message-square-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">WhatsApp delivered</strong><span class="text-xs text-slate-500">Template: order shipped</span></span><time class="text-xs text-slate-500">09:43</time></div><div class="ml-4 h-5 border-l border-dashed border-slate-300 dark:border-slate-700"></div><div class="grid grid-cols-[auto_1fr_auto] items-start gap-3"><span class="grid size-8 place-items-center rounded-lg bg-sky-500/10 text-sky-500"><span class="icon-[lucide--user-round-check] size-4" aria-hidden="true"></span></span><span><strong class="block text-sm">Human follow-up</strong><span class="text-xs text-slate-500">Assigned to support</span></span><time class="text-xs text-slate-500">09:48</time></div></div>{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,5 +9,10 @@ component WorkflowCanvasPreview {
|
||||
alt = ""
|
||||
class = ""
|
||||
}
|
||||
view { <article class="wire-card wire-catalog-card {class}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></article> }
|
||||
view {
|
||||
<article class="wire-card wire-catalog-card {class}">
|
||||
{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{:else}<div role="img" aria-label="Automation workflow with trigger, decision, and channel delivery steps" class="relative grid min-h-52 grid-cols-[1fr_auto_1fr] items-center gap-3 overflow-hidden rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-800 dark:bg-slate-950/60"><div class="grid gap-2 rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900"><span class="icon-[lucide--webhook] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Event received</strong><span class="text-xs text-slate-500">Order shipped</span></div><span class="icon-[lucide--arrow-right] size-5 text-slate-400" aria-hidden="true"></span><div class="grid gap-2 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3"><span class="icon-[lucide--workflow] size-5 text-violet-500" aria-hidden="true"></span><strong class="text-sm">Smart route</strong><span class="text-xs text-slate-500">Consent + availability</span></div><span class="absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300"><span class="icon-[lucide--circle-check] size-3.5" aria-hidden="true"></span>Delivered</span></div>{/if}
|
||||
{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}
|
||||
</article>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
component Badge {
|
||||
props {
|
||||
class = ""
|
||||
label = "Badge"
|
||||
label = ""
|
||||
variant = "neutral"
|
||||
}
|
||||
view {
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}</span>
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset {variant === 'success' ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300' : variant === 'warning' ? 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300' : variant === 'danger' ? 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300' : variant === 'brand' ? 'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-950/40 dark:text-violet-300' : 'bg-slate-100 text-slate-700 ring-slate-600/10 dark:bg-slate-800 dark:text-slate-300'} {class}">{label}<slot /></span>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user