16 lines
1.7 KiB
Plaintext
16 lines
1.7 KiB
Plaintext
component ConversationPreview {
|
||
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="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>
|
||
}
|
||
}
|