File size: 1,369 Bytes
6426ece |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script lang="ts">
import CodeMirror from '$lib/CodeMirror/CodeMirror.svelte';
import CopyButton from '$lib/CopyButton/CopyButton.svelte';
import LineWrapButton from '$lib/LineWrapButton/LineWrapButton.svelte';
import { EditorView } from '@codemirror/view';
export let content = '';
export let error;
let wrapLines = true;
</script>
<div class="h-full overflow-scroll bg-white dark:bg-gray-900">
<div class="sticky top-0 z-10 bg-white dark:bg-gray-900">
<div
class="text-semibold flex items-center gap-x-2 border-b border-gray-500 bg-linear-to-r from-purple-200 to-white px-3 py-1.5 text-lg dark:from-purple-700 dark:to-purple-900 dark:text-gray-200"
>
Rendered Output
</div>
{#if error}
<div class="alert alert-error">
{error}
</div>
{:else}
<div class="flex items-center border-b px-3 py-2">
<div class="ml-auto flex items-center gap-x-2">
<CopyButton
label="Copy"
value={content}
style="button-clear"
classNames="h-6! [&_svg]:text-[0.7rem]! px-1.5! text-black! dark:text-gray-200!"
/>
<LineWrapButton
style="button-clear"
bind:wrapLines
classNames="[&_svg]:text-xs! size-6! p-0!"
/>
</div>
</div>
{/if}
</div>
{#if !error}
<CodeMirror
value={content}
readonly
extensions={[wrapLines ? [EditorView.lineWrapping] : []]}
/>
{/if}
</div>
|