content component

TimelineItem

Reusable timeline item component.

@wrnexus/ui 0.2.655 props0 slots0 events

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

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`title`	`string`	Optional	`"Event"`
`date`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`status`	`string`	Optional	`"default"`

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