SpTimelineList

import { SpTimelineList } from '@silverpoint/react/ui/timeline-list';

const steps = [
  { title: 'Drawn', time: '09:12', description: 'The ground is prepared.', status: 'done' },
  { title: 'Reviewed', time: '11:05', description: 'Precision mode checked.', status: 'current' },
  { title: 'Published', time: '—', description: 'Waiting for the release.', status: 'pending' },
] as const;

<SpTimelineList items={steps} label="Release steps" />

<script setup lang="ts">
import { SpTimelineList } from '@silverpoint/vue/ui/timeline-list';

const steps = [
  { title: 'Drawn', time: '09:12', description: 'The ground is prepared.', status: 'done' },
  { title: 'Reviewed', time: '11:05', description: 'Precision mode checked.', status: 'current' },
  { title: 'Published', time: '—', description: 'Waiting for the release.', status: 'pending' },
] as const;
</script>

<template>
  <SpTimelineList :items="steps" label="Release steps" />
</template>

import { Component } from '@angular/core';
import { SpTimelineList } from '@silverpoint/angular/ui/timeline-list';

@Component({
  selector: 'app-steps',
  imports: [SpTimelineList],
  template: `<sp-timeline-list [items]="steps" label="Release steps" />`,
})
export class Steps {
  protected readonly steps = [
    { title: 'Drawn', time: '09:12', description: 'The ground is prepared.', status: 'done' },
    { title: 'Reviewed', time: '11:05', description: 'Precision mode checked.', status: 'current' },
    { title: 'Published', time: '—', description: 'Waiting for the release.', status: 'pending' },
  ] as const;
}

sp_timeline_list(
    [
        {"title": "Drawn", "time": "09:12", "description": "The ground is prepared.", "status": "done"},
        {"title": "Reviewed", "time": "11:05", "description": "Precision mode checked.", "status": "current"},
        {"title": "Published", "time": "—", "description": "Waiting for the release.", "status": "pending"},
    ],
    label="Release steps",
)