29 lines
810 B
Svelte
29 lines
810 B
Svelte
<script lang="ts">
|
|
import type { ClassValue } from 'svelte/elements';
|
|
import { ErrorMessage, type RawError } from './error';
|
|
|
|
interface Props {
|
|
/** Error in the form of an ErrorMessage */
|
|
error?: ErrorMessage | null;
|
|
/** Raw error that can be converted to an ErrorMessage */
|
|
rawError?: RawError | null;
|
|
/** Additional CSS classes for the error box */
|
|
class?: ClassValue | null;
|
|
}
|
|
|
|
let { error, rawError, class: classValue }: Props = $props();
|
|
|
|
let errorMessage = $derived.by(() => {
|
|
if (error) return error;
|
|
if (rawError) return new ErrorMessage(rawError);
|
|
});
|
|
</script>
|
|
|
|
{#if errorMessage && errorMessage.hasError()}
|
|
<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
|
|
{#each errorMessage.lines as line}
|
|
<p>{line}</p>
|
|
{/each}
|
|
</div>
|
|
{/if}
|