47 lines
873 B
Svelte
47 lines
873 B
Svelte
<script>
|
|
let { src } = $props()
|
|
let text = $state('')
|
|
let loading = $state(true)
|
|
|
|
$effect(() => {
|
|
fetch(src)
|
|
.then(r => r.text())
|
|
.then(t => {
|
|
text = t
|
|
loading = false
|
|
})
|
|
.catch(() => {
|
|
text = 'Failed to load text content.'
|
|
loading = false
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<div class="text-viewer">
|
|
{#if loading}
|
|
<p>Loading text...</p>
|
|
{:else}
|
|
<pre>{text}</pre>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.text-viewer {
|
|
max-width: 900px;
|
|
margin: 24px auto;
|
|
padding: 24px;
|
|
background: var(--retro-panel);
|
|
border: 3px solid var(--retro-border);
|
|
box-shadow: 6px 6px 0px var(--retro-shadow);
|
|
}
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|