Order History Widget

<div class="ws-shipping-widget rounded-2xl border p-6 max-w-md mx-auto"
     style="background: var(--ws-shipping-widget-bg); color: var(--ws-shipping-widget-text); border-color: var(--ws-shipping-widget-border);">

  <h2 class="text-lg font-semibold tracking-tight mb-4"
      style="color: var(--ws-shipping-widget-text);">Recent Orders</h2>

  <div class="divide-y" style="border-color: var(--ws-shipping-widget-border);">

    <!-- Order 1: Delivered -->
    <div class="flex items-center justify-between py-3 gap-4">
      <div class="flex flex-col gap-0.5 min-w-0">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2831</span>
          <span class="text-xs rounded-full px-2 py-0.5 font-medium"
                style="background: color-mix(in oklch, var(--ws-shipping-widget-success) 12%, transparent); color: var(--ws-shipping-widget-success);">Delivered</span>
        </div>
        <span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 14, 2026 · 3 items</span>
      </div>
      <span class="text-sm font-semibold tabular-nums whitespace-nowrap"
            style="color: var(--ws-shipping-widget-text);">$124.90</span>
    </div>

    <!-- Order 2: In Transit -->
    <div class="flex items-center justify-between py-3 gap-4">
      <div class="flex flex-col gap-0.5 min-w-0">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2847</span>
          <span class="text-xs rounded-full px-2 py-0.5 font-medium"
                style="background: color-mix(in oklch, var(--ws-shipping-widget-accent) 12%, transparent); color: var(--ws-shipping-widget-accent);">In Transit</span>
        </div>
        <span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 18, 2026 · 1 item</span>
      </div>
      <span class="text-sm font-semibold tabular-nums whitespace-nowrap"
            style="color: var(--ws-shipping-widget-text);">$59.00</span>
    </div>

    <!-- Order 3: Processing -->
    <div class="flex items-center justify-between py-3 gap-4">
      <div class="flex flex-col gap-0.5 min-w-0">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2853</span>
          <span class="text-xs rounded-full px-2 py-0.5 font-medium"
                style="background: color-mix(in oklch, oklch(0.8 0.15 85) 12%, transparent); color: oklch(0.65 0.15 85);">Processing</span>
        </div>
        <span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 21, 2026 · 5 items</span>
      </div>
      <span class="text-sm font-semibold tabular-nums whitespace-nowrap"
            style="color: var(--ws-shipping-widget-text);">$287.50</span>
    </div>

    <!-- Order 4: Cancelled -->
    <div class="flex items-center justify-between py-3 gap-4">
      <div class="flex flex-col gap-0.5 min-w-0">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">#WS-2819</span>
          <span class="text-xs rounded-full px-2 py-0.5 font-medium"
                style="background: color-mix(in oklch, oklch(0.65 0.2 25) 12%, transparent); color: oklch(0.65 0.2 25);">Cancelled</span>
        </div>
        <span class="text-xs" style="color: var(--ws-shipping-widget-text-muted);">Mar 10, 2026 · 2 items</span>
      </div>
      <span class="text-sm font-semibold tabular-nums whitespace-nowrap line-through"
            style="color: var(--ws-shipping-widget-text-muted);">$42.00</span>
    </div>

  </div>
</div>