<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
         <Steps.Step.Description slot="description">{step.description}</Steps.Step.Description>
      </Steps.Step>
   {/each}
</Steps>

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="bullets" {currentStep}>
   <Steps.Summary slot="summary">Step {currentStep} of {steps.length}</Steps.Summary>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
      </Steps.Step>
   {/each}
</Steps>

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="bullets-text" {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
      </Steps.Step>
   {/each}
</Steps>

<script lang="ts">
	import { Steps } from 'stwui';

   let currentStep = 2;

	const steps = [
		{
			href: '#step1',
			title: 'Step 1',
			description: 'Job details'
		},
		{
			href: '#step2',
			title: 'Step 2',
			description: 'Application form'
		},
		{
			href: '#step3',
			title: 'Step 3',
			description: 'Preview'
		}
	];
</script>

<Steps variant="circles-text" {currentStep}>
   {#each steps as step, i}
      <Steps.Step step={i + 1} href={step.href} on:click={() => (currentStep = i + 1)}>
         <Steps.Step.Title slot="title">{step.title}</Steps.Step.Title>
         <Steps.Step.Description slot="description">{step.description}</Steps.Step.Description>
      </Steps.Step>
   {/each}
</Steps>