Timeline

<script lang="ts">
	import Timeline from '@tcpsystems/ui/foundation/Timeline';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack data-gap="lg">
	<Timeline
		items={[
			{ time: '2026-11-06T14:22:00Z', title: 'Deployed to production', text: 'Version v2.14.0 released with new dashboard widgets and improved cache invalidation.', tone: 'ok', state: 'deployed' },
			{ time: '2026-11-06T14:18:00Z', title: 'Build completed', text: 'All tests passed. Docker image pushed to registry.', tone: 'ok', state: 'built' },
			{ time: '2026-11-06T14:15:00Z', title: 'Security scan passed', text: 'No vulnerabilities found in dependencies.', tone: 'ok', state: 'scanned' },
			{ time: '2026-11-06T14:10:00Z', title: 'Tests running', text: 'Running integration test suite (47 tests)…', tone: 'progress', state: 'testing' },
			{ time: '2026-11-06T14:05:00Z', title: 'Build started', text: 'Triggered by merge to main branch.', tone: 'neutral', state: 'building' },
			{ time: '2026-11-06T13:58:00Z', title: 'Pull request merged', text: 'PR #342 merged by Aisha Patel — "Add uptime strip component"', tone: 'info', state: 'merged' },
		]}
	/>
</Stack>

<script lang="ts">
	import Timeline from '@tcpsystems/ui/foundation/Timeline';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack data-gap="lg">
	<Timeline
		items={[
			{ time: '2026-11-06T16:45:00Z', title: 'Incident resolved', text: 'Database connectivity restored. Root cause: connection pool exhaustion during backup window.', tone: 'ok', state: 'resolved' },
			{ time: '2026-11-06T16:30:00Z', title: 'Mitigation applied', text: 'Increased connection pool size from 100 to 200. Monitoring for stability.', tone: 'warn', state: 'mitigating' },
			{ time: '2026-11-06T16:15:00Z', title: 'Investigating', text: 'Elevated error rates on API requests. Database showing high connection count.', tone: 'warn', state: 'investigating' },
			{ time: '2026-11-06T16:05:00Z', title: 'Alert triggered', text: 'P95 latency exceeded 2s threshold. On-call paged.', tone: 'danger', state: 'alerting' },
			{ time: '2026-11-06T16:00:00Z', title: 'Backup job started', text: 'Scheduled nightly backup began. No manual changes deployed.', tone: 'neutral', state: 'scheduled' },
		]}
	/>
</Stack>