1  <script lang="ts">
 2    import Toggle from '$lib/components/toggle/toggle.svelte';
 3  
 4    interface Props {
 5      hiddenItemsCount: number;
 6      showHidden?: boolean;
 7      message?: string;
 8    }
 9  
10    let {
11      hiddenItemsCount,
12      showHidden = $bindable(false),
13      message = 'Show hidden',
14    }: Props = $props();
15  </script>
16  
17  {#if hiddenItemsCount}
18    <div class="visibility-toggle" class:showHidden>
19      <Toggle bind:checked={showHidden} />
20      <p>{message}</p>
21      <div class="count"><span>{hiddenItemsCount}</span></div>
22    </div>
23  {/if}
24  
25  <style>
26    .visibility-toggle {
27      display: flex;
28      gap: 8px;
29      margin-top: 2.5rem;
30    }
31  
32    .count {
33      font-weight: bold;
34      border-radius: 0.5rem 0 0.5rem 0.5rem;
35      background-color: var(--color-foreground-level-2);
36    }
37  
38    .count span {
39      padding: 0.5rem 0.5rem;
40    }
41  
42    .showHidden {
43      margin-bottom: 2.5rem;
44    }
45  </style>