AnalyticsDashboardPreview

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnalyticsDashboardPreview
  eyebrow="eyebrow"
  title="title"
  description="description"
  href="href"
  actionLabel="Learn more"
/>

Legacy mount name: data-component="AnalyticsDashboardPreview".

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/AnalyticsDashboardPreview.wrn

component AnalyticsDashboardPreview {
  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="Communication performance chart trending upward over seven days" class="grid min-h-64 gap-4 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 justify-between">
        <span class="text-sm font-semibold">Delivery trend</span>
        <span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-500">
        <span class="icon-[lucide--trending-up] size-4" aria-hidden="true">
        </span>18.4%</span>
        </div>
        <svg viewBox="0 0 600 190" role="presentation" class="h-auto w-full overflow-visible">
        <defs>
        <linearGradient id="wire-analytics-fill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="currentColor" stop-opacity="0.28">
        </stop>
        <stop offset="100%" stop-color="currentColor" stop-opacity="0">
        </stop>
        </linearGradient>
        </defs>
        <g stroke="currentColor" stroke-opacity="0.12">
        <path d="M0 30H600M0 80H600M0 130H600M0 180H600">
        </path>
        </g>
        <path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30 L600 190 L0 190 Z" fill="url(#wire-analytics-fill)" class="text-violet-500">
        </path>
        <path d="M0 157 C55 150 70 118 124 126 S205 152 255 103 S342 91 392 98 S470 67 515 74 S566 38 600 30" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" class="text-violet-500">
        </path>
        <g fill="currentColor" class="text-violet-500">
        <circle cx="124" cy="126" r="5">
        </circle>
        <circle cx="255" cy="103" r="5">
        </circle>
        <circle cx="392" cy="98" r="5">
        </circle>
        <circle cx="515" cy="74" r="5">
        </circle>
        <circle cx="600" cy="30" r="6">
        </circle>
        </g>
        </svg>
        <div class="flex justify-between text-[0.6875rem] text-slate-500">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</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>
    }
}