content component

AnalyticsDashboardPreview

Reusable analytics dashboard preview component.

@wrnexus/ui 0.3.28 props1 slots0 events

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

Prop	Type	Requirement	Default
`eyebrow`	`string`	Optional	`""`
`title`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`href`	`string`	Optional	`""`
`actionLabel`	`string`	Optional	`"Learn more"`
`image`	`string`	Optional	`""`
`alt`	`string`	Optional	`""`
`class`	`string`	Optional	`""`

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 {
        <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>
    }
}