72 lines
3.4 KiB
Plaintext
72 lines
3.4 KiB
Plaintext
component AnalyticsDashboardPreview {
|
|
props {
|
|
eyebrow = ""
|
|
title = ""
|
|
description = ""
|
|
href = ""
|
|
actionLabel = "Learn more"
|
|
image = ""
|
|
alt = ""
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
|
|
<div
|
|
class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
|
|
>
|
|
<div>
|
|
{#if image}
|
|
<img
|
|
src="{image}"
|
|
alt="{alt}"
|
|
class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
|
|
/>
|
|
{:else}
|
|
<div
|
|
class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
|
|
role="img"
|
|
aria-label="Delivery trend rising over seven days"
|
|
>
|
|
<div class="flex items-center justify-between gap-4 text-sm">
|
|
<strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
|
|
<span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
|
|
</div>
|
|
<svg
|
|
class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
|
|
viewBox="0 0 700 250"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="wire-analytics-area"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
|
|
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
|
|
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
|
|
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
|
|
</svg>
|
|
<div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
{#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
|
|
{#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
|
|
{#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
|
<div class="mt-5"><slot /></div>
|
|
{#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|