1  <script lang="ts">
 2    import Emoji from '$lib/components/emoji/emoji.svelte';
 3    import { fade } from 'svelte/transition';
 4  
 5    interface Props {
 6      emoji?: string;
 7      headline?: string | undefined;
 8      text?: string | undefined;
 9    }
10  
11    let {
12      emoji = '🫙',
13      headline = 'Nothing to see here',
14      text = 'Please add stuff to this section to see it here.',
15    }: Props = $props();
16  </script>
17  
18  <div class="notice empty-state" in:fade={{ duration: 250 }}>
19    <Emoji {emoji} size="huge" />
20    <div class="text-group">
21      {#if headline}<p class="typo-text-small-bold">
22          {headline}
23        </p>{/if}
24      {#if text}<p class="typo-text-small">{text}</p>{/if}
25    </div>
26  </div>
27  
28  <style>
29    .notice {
30      display: flex;
31      flex-direction: column;
32      gap: 1rem;
33      max-width: 16rem;
34      text-align: center;
35    }
36  
37    .text-group {
38      display: flex;
39      flex-direction: column;
40      gap: 0.5rem;
41    }
42  </style>