Timeline

import '@bluui/web/styles.css'

import { createTimeline } from "@bluui/web";
export function mount(host: HTMLElement) {
  return createTimeline(host, {
  "IsCompact": false,
  "IsReversed": false,
  "Items": [
    {
      "Key": "created",
      "Title": "Order received",
      "Description": "Order #BLU-1042 was placed by Jordan Lee.",
      "Timestamp": "Today · 09:12",
      "Color": "Success",
      "Icon": "✓"
    },
    {
      "Key": "paid",
      "Title": "Payment confirmed",
      "Description": "$249.00 paid by card.",
      "Timestamp": "Today · 09:14",
      "Color": "Success",
      "Icon": "✓"
    },
    {
      "Key": "packing",
      "Title": "Preparing shipment",
      "Description": "Your order is being packed by the warehouse team.",
      "Timestamp": "Today · 10:30",
      "Color": "Processing",
      "ActionLabel": "View order"
    },
    {
      "Key": "delivery",
      "Title": "Estimated delivery",
      "Description": "Arriving in 2–3 business days.",
      "Timestamp": "Oct 14–15",
      "Color": "Default"
    }
  ]
}, { ItemClick: key => { host.dataset.activity = key; } });
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()