38 lines
2.9 KiB
Plaintext
38 lines
2.9 KiB
Plaintext
component ChannelFlow {
|
|
props {
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}" role="img" aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks">
|
|
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
|
<span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
|
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
|
|
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">order.shipped</small>
|
|
</div>
|
|
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
|
|
|
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
|
<span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
|
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
|
|
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Eligibility checked</small>
|
|
</div>
|
|
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
|
|
|
<div class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3">
|
|
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
|
|
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
|
|
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
|
|
<span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Voice</span>
|
|
</div>
|
|
<span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
|
|
|
|
<div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
|
|
<span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
|
|
<strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
|
|
<small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Webhook emitted</small>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|