1  <script lang="ts">
 2    import type { ComponentProps } from "svelte";
 3    import type { ErrorParam } from "@app/lib/router/definitions";
 4  
 5    import config from "@app/lib/config";
 6    import Command from "./Command.svelte";
 7    import ExternalLink from "./ExternalLink.svelte";
 8    import IconLarge from "./IconLarge.svelte";
 9  
10    export let title: string;
11    export let description: string;
12    export let error: ErrorParam = undefined;
13    export let icon: ComponentProps<IconLarge>["name"] = "alert";
14  </script>
15  
16  <style>
17    .error {
18      align-items: center;
19      border-radius: inherit;
20      display: flex;
21      flex-direction: column;
22      font-family: var(--font-family-sans-serif);
23      font-size: inherit;
24      padding: 1rem;
25      border-radius: var(--border-radius-small);
26      gap: 1rem;
27    }
28    .label {
29      font-size: var(--font-size-small);
30      font-weight: var(--font-weight-regular);
31      max-width: 36rem;
32    }
33    .error :global(code) {
34      font-family: var(--font-family-monospace);
35      font-size: var(--font-size-small);
36      background-color: var(--color-fill-ghost);
37      border-radius: var(--border-radius-tiny);
38      padding: 0.125rem 0.25rem;
39    }
40  
41    .help {
42      font-size: var(--font-size-small);
43      text-align: center;
44    }
45    .command {
46      max-width: 25rem;
47    }
48    @media (max-width: 719.98px) {
49      .command {
50        max-width: 20rem;
51      }
52    }
53  </style>
54  
55  <div class="error">
56    <IconLarge name={icon} />
57    <div class="txt-medium txt-bold">
58      {title}
59    </div>
60    <!-- This @html is secure since we don't allow user input -->
61    <div class="label">{@html description}</div>
62    {#if error}
63      <div class="help">
64        If you need help resolving this issue, copy the error message
65        <br class="global-hide-on-mobile-down" />
66        below and send it to us on
67        <ExternalLink href={config.supportWebsite}>
68          {config.supportWebsite}
69        </ExternalLink>
70      </div>
71      <div class="command">
72        <Command
73          command={JSON.stringify(error, Object.getOwnPropertyNames(error))}
74          fullWidth
75          showPrompt={false} />
76      </div>
77    {/if}
78  </div>