Stepper

<script lang="ts">
	import Stepper from '@tcpsystems/ui/foundation/Stepper';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Button from '@tcpsystems/ui/foundation/Button';
	const uid = $props.id();
	const labels = ['Build', 'Verify', 'Release'];
	let current = $state(1);
</script>

<Stack>
	<Stepper label="Deployment progress" steps={labels.map((label, i) => ({
		id: `${uid}-${i}`, label, state: i < current ? 'done' : i === current ? 'current' : 'upcoming'
	}))} />
	<Button onclick={() => current = (current + 1) % 4}>{current === 3 ? 'Start another deployment' : 'Complete step'}</Button>
</Stack>

<script lang="ts">
	import Stepper from '@tcpsystems/ui/foundation/Stepper';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Button from '@tcpsystems/ui/foundation/Button';
	const uid = $props.id();
	let retry = $state(false);
</script>

<Stack>
	<Stepper label="Release checks" orientation="vertical" steps={[
		{ id: `${uid}-build`, label: 'Build', state: 'done', href: `#${uid}-build`, description: 'Image published' },
		{ id: `${uid}-verify`, label: 'Verify', state: retry ? 'current' : 'error', description: retry ? 'Checking readiness' : 'Readiness check failed' },
		{ id: `${uid}-release`, label: 'Release', state: 'upcoming' }
	]} />
	<p id={`${uid}-build`}>Build gateway v2.4 is ready.</p>
	<Button disabled={retry} onclick={() => retry = true}>{retry ? 'Checks running' : 'Retry checks'}</Button>
</Stack>