16 lines
2.2 KiB
Plaintext
16 lines
2.2 KiB
Plaintext
component UnifiedTimelinePreview {
|
|
props {
|
|
eyebrow = ""
|
|
title = ""
|
|
description = ""
|
|
href = ""
|
|
actionLabel = "Learn more"
|
|
image = ""
|
|
alt = ""
|
|
class = ""
|
|
}
|
|
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>
|
|
}
|
|
}
|