2019-07-13 21:35:57 +12:00
|
|
|
<script>
|
2020-02-03 22:50:30 +13:00
|
|
|
export let errors = []
|
2019-07-13 21:35:57 +12:00
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
$: hasErrors = errors.length > 0
|
2019-07-13 21:35:57 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if hasErrors}
|
2020-12-04 21:27:59 +13:00
|
|
|
<div class="container">
|
2019-07-13 21:35:57 +12:00
|
|
|
{#each errors as error}
|
2020-12-04 21:27:59 +13:00
|
|
|
<div class="error">{error.dataPath || ''} {error.message}</div>
|
2019-07-13 21:35:57 +12:00
|
|
|
{/each}
|
2020-03-28 05:58:32 +13:00
|
|
|
</div>
|
2020-03-26 05:57:04 +13:00
|
|
|
{/if}
|
2020-10-03 06:49:00 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.container {
|
|
|
|
border-radius: var(--border-radius-m);
|
|
|
|
margin: 0;
|
|
|
|
padding: var(--spacing-m);
|
2020-12-04 21:27:59 +13:00
|
|
|
background-color: rgba(241, 165, 165, 0.2);
|
|
|
|
color: var(--red);
|
2020-10-03 06:49:00 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
.error {
|
|
|
|
font-size: var(--font-size-xs);
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
.error:first-letter {
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
</style>
|