1  <script lang="ts">
 2    import Button from '$lib/components/button/button.svelte';
 3    import modal from '$lib/stores/modal';
 4    import CrossCircle from '$lib/components/icons/CrossCircle.svelte';
 5  
 6    interface Props {
 7      message: string;
 8    }
 9  
10    let { message }: Props = $props();
11  
12    function closeModal() {
13      modal.setHideable(true);
14      modal.hide();
15    }
16  </script>
17  
18  <div class="error-modal">
19    <CrossCircle style="height: 4rem; width: 4rem; fill: var(--color-negative)" />
20    <h2>Woops</h2>
21    <p>Something went wrong. Here's some additional information:</p>
22    <p class="codeblock typo-text-mono">
23      {message}
24    </p>
25    <Button onclick={closeModal}>Got it</Button>
26    <a class="typo-text-small" target="_blank" href="https://discord.gg/BakDKKDpHF"
27      >Ask for help on Discord ↗</a
28    >
29  </div>
30  
31  <style>
32    .error-modal {
33      display: flex;
34      gap: 1rem;
35      justify-content: center;
36      align-items: center;
37      flex-direction: column;
38      padding: 1rem 0;
39    }
40  
41    .codeblock {
42      padding: 0.5rem;
43      border-radius: 0.5rem;
44      width: 100%;
45      max-width: 32rem;
46      background-color: var(--color-foreground-level-2);
47      text-align: left;
48      overflow: scroll;
49    }
50  
51    p {
52      color: var(--color-foreground);
53    }
54  
55    a {
56      margin-top: 1rem;
57      color: var(--color-foreground);
58      text-decoration: underline;
59    }
60  </style>