1  <script lang="ts">
 2    import Trophy from '$lib/components/icons/Trophy.svelte';
 3    import Section from '../section/section.svelte';
 4  
 5    interface Props {
 6      collapsed?: boolean;
 7      collapsable?: boolean;
 8      children?: import('svelte').Snippet;
 9    }
10  
11    let { collapsed = $bindable(false), collapsable = $bindable(false), children }: Props = $props();
12  
13    let error = false;
14  </script>
15  
16  <Section
17    bind:collapsed
18    bind:collapsable
19    header={{
20      icon: Trophy,
21      label: 'Stats',
22    }}
23    skeleton={{
24      loaded: true,
25      empty: false,
26      error,
27      emptyStateEmoji: '🫙',
28      emptyStateHeadline: 'No Stats',
29      emptyStateText: 'We couldn’t find any stats for you.',
30    }}
31  >
32    <div class="stats">
33      {@render children?.()}
34    </div>
35  </Section>
36  
37  <style>
38    .stats {
39      overflow: scroll;
40      gap: 1.5rem;
41      display: flex;
42    }
43  
44    @media (max-width: 767px) {
45      .stats {
46        flex-direction: column;
47      }
48    }
49  </style>