ErrorSummary

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

	const uid = $props.id();
</script>

<Stack>
	<ErrorSummary
		errors={[
			{ href: `javascript:void(0)`, text: 'Enter a valid email address' },
			{ href: `javascript:void(0)`, text: 'Password must be at least 8 characters' }
		]}
	/>
	<form>
		<Stack>
			<label for={`${uid}-email`}>Email</label>
			<Input id={`${uid}-email`} type="email" invalid="true" />
		</Stack>
		<Stack>
			<label for={`${uid}-password`}>Password</label>
			<Input id={`${uid}-password`} type="password" invalid="true" />
		</Stack>
		<Button type="submit">Create account</Button>
	</form>
</Stack>

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

<Stack>
	<ErrorSummary
		title="Deployment blocked"
		errors={[
			{ href: 'javascript:void(0)', text: 'Environment variable DATABASE_URL is not set' },
			{ href: 'javascript:void(0)', text: 'Selected region eu-west-1 has no capacity' },
			{ href: 'javascript:void(0)', text: 'Plan "starter" does not support custom domains' }
		]}
	/>
	<Cluster>
		<Button variant="ghost">Configure environment</Button>
		<Button variant="ghost">Upgrade plan</Button>
	</Cluster>
</Stack>

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

	let errors = $state([
		{ href: 'javascript:void(0)', text: 'Invoice INV-2024-042 is past due' },
		{ href: 'javascript:void(0)', text: 'Payment method expired — update billing' }
	]);
</script>

<Stack>
	{#if errors.length > 0}
		<ErrorSummary errors={errors} />
	{/if}
	<Cluster>
		<Button variant="ghost" onclick={() => (errors = errors.slice(1))} disabled={errors.length === 0}>
			Dismiss first
		</Button>
		<Button
			variant="ghost"
			onclick={() =>
				(errors = [
					{ href: 'javascript:void(0)', text: 'Invoice INV-2024-042 is past due' },
					{ href: 'javascript:void(0)', text: 'Payment method expired — update billing' }
				])}
		>
			Reset errors
		</Button>
	</Cluster>
</Stack>