Fred Boniface
6ed262ce59
- Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience. - Adjust error handling in load functions, plain error thrown for handling in the error handler. - Fix the warning regarding a click handler attached to an <img> on the About page - Re-organise component directory - Remove unused font declarations from global.css Features: - Add service-worker caching of FilterData API response to allow for filtering to work fully offline -
56 lines
1.1 KiB
Svelte
56 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import noResult from '$lib/assets/img/no-data.svg';
|
|
import Button from '$lib/components/ui/form-elements/Button.svelte';
|
|
let { title = 'No results', message = 'Try checking your search term' } = $props();
|
|
</script>
|
|
|
|
<div class="no-results-state">
|
|
<img src={noResult} class="image" height="200" width="200" alt="" role="presentation" />
|
|
<h3>{title}</h3>
|
|
<p>{message}</p>
|
|
<div class="btn-container">
|
|
<Button
|
|
type="button"
|
|
onclick={() => (history.length > 1 ? history.back() : (window.location.href = '/'))}
|
|
color="accent"
|
|
>
|
|
Go back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.no-results-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 400px;
|
|
padding: 5rem;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
font-family: 'URW-Gothic', sans-serif;
|
|
}
|
|
|
|
.image {
|
|
margin-bottom: 1.95rem;
|
|
max-width: 90%;
|
|
height: auto;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.btn-container {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|