alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import FileText from "$icon/file-text";
3
4 interface Props {
5 filename: string;
6 contents: string;
7 html?: string | null;
8 }
9
10 let { filename, contents, html = null }: Props = $props();
11</script>
12
13<div
14 class="mt-4 w-full overflow-hidden rounded-sm border border-border-default bg-background-default"
15>
16 <div class="border-b border-border-default px-4 py-2">
17 <span class="flex items-center gap-2">
18 <FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
19 <span class="font-mono text-sm text-foreground-muted">{filename}</span>
20 </span>
21 </div>
22 {#if html}
23 <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
24 <div class="markup overflow-x-auto px-6 py-4">{@html html}</div>
25 {:else}
26 <div class="overflow-x-auto px-6 py-4">
27 <pre class="font-mono text-sm whitespace-pre-wrap text-foreground-default">{contents}</pre>
28 </div>
29 {/if}
30</div>