TimelineItem

Usage

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

<TimelineItem
  title="Event"
  date="date"
  description="description"
  status="default"
/>

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

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/TimelineItem.wrn

component TimelineItem {
  props {
    class = ""
    title = "Event"
    date = ""
    description = ""
    status = "default"
  }
  view {
        <li class="relative {class}">
        <span class="absolute -left-[1.85rem] top-1 size-3 rounded-full ring-4 ring-white dark:ring-slate-950 {status === 'success' ? 'bg-emerald-500' : status === 'warning' ? 'bg-amber-500' : 'bg-violet-500'}">
        </span>
        <div class="flex flex-wrap items-baseline justify-between gap-2">
        <h3 class="font-semibold">{title}</h3>
        <time class="text-xs text-slate-500">{date}</time>
        </div>
        <p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p>
        </li>
    }
}