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