96 lines
1.8 KiB
Svelte
96 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import IconButton from "../../utils/IconButton.svelte";
|
|
|
|
import Spinner from "../../utils/Spinner.svelte";
|
|
export let address: string;
|
|
|
|
let mode: "preview" | "full" = "preview";
|
|
|
|
$: textContent = (async () => {
|
|
const response = await fetch(
|
|
`/api/${mode == "preview" ? "thumb" : "raw"}/${address}`
|
|
);
|
|
return await response.text();
|
|
})();
|
|
</script>
|
|
|
|
<div class="text-preview">
|
|
<header class="text-header">
|
|
<div
|
|
class="tab"
|
|
class:active={mode == "preview"}
|
|
on:click={() => (mode = "preview")}
|
|
>
|
|
<IconButton
|
|
name="image"
|
|
active={mode == "preview"}
|
|
on:click={() => (mode = "preview")}
|
|
/>
|
|
<div class="label">Preview</div>
|
|
</div>
|
|
<div
|
|
class="tab"
|
|
class:active={mode == "full"}
|
|
on:click={() => (mode = "full")}
|
|
>
|
|
<IconButton
|
|
name="shape-circle"
|
|
active={mode == "full"}
|
|
on:click={() => (mode = "full")}
|
|
/>
|
|
<div class="label">Full</div>
|
|
</div>
|
|
</header>
|
|
<div class="text">
|
|
{#await textContent}
|
|
<Spinner />
|
|
{:then text}
|
|
{text}
|
|
{/await}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.text-preview {
|
|
flex: 1;
|
|
}
|
|
|
|
.text {
|
|
background: var(--background);
|
|
padding: 0.5em;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--foreground);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.tab {
|
|
display: flex;
|
|
|
|
cursor: pointer;
|
|
|
|
border: 1px solid var(--foreground);
|
|
border-bottom: 0;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
|
|
padding: 0.15em;
|
|
margin: 0 0.1em;
|
|
|
|
&.active {
|
|
background: var(--background);
|
|
}
|
|
|
|
.label {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|