Alert

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
</script>

<Alert title="Reading room hours have changed">
	During Ramadan the Baghdad reading room opens after the evening prayer.
</Alert>

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
</script>

<Alert tone="success" title="Copy commissioned">A scribe will finish it within the season.</Alert>

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
</script>

<Alert tone="warning" title="Loan due in 3 days">Return The Book of Optics by Thursday.</Alert>

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
</script>

<Alert tone="danger" title="This manuscript is damaged">
	Folios 12 to 19 are water-stained; handle with gloves.
</Alert>

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
	import Button from '#lib/ui/Button.svelte';

	let shown = $state(true);
</script>

{#if shown}
	<Alert tone="warning" title="Loan due in 3 days" ondismiss={() => (shown = false)}>
		Renew it now to keep reading, or return it to the Baghdad desk.
		{#snippet actions()}
			<Button size="sm" variant="ghost">Return it</Button>
			<Button size="sm">Renew for 40 days</Button>
		{/snippet}
	</Alert>
{:else}
	<Button variant="secondary" onclick={() => (shown = true)}>Show the alert again</Button>
{/if}

<script lang="ts">
	import Alert from '#lib/ui/Alert.svelte';
	import Button from '#lib/ui/Button.svelte';

	let result = $state<'saved' | 'failed' | undefined>();
</script>

<div class="row">
	<Button variant="secondary" onclick={() => (result = 'saved')}>Save the note</Button>
	<Button variant="secondary" onclick={() => (result = 'failed')}>Save offline</Button>
</div>
<!-- live: announced as it appears, because the person is waiting for this result. -->
{#if result === 'saved'}
	<Alert live tone="success" title="Note saved to the margin." />
{:else if result === 'failed'}
	<Alert live tone="danger" title="Couldn't save: the catalog is unreachable." />
{/if}

<style>
	.row {
		display: flex;
		gap: 0.5rem;
	}
</style>