<script lang="ts">
import { onMount } from "svelte";
	export let contentType: string;
	export let filename: string;
	export let slug: string;

	let content = "";

	onMount(async () => {
		const res = await fetch(`/s/${slug}`);
		content = await res.text();
	});
</script>

<div class="container" >
	<header>{filename}</header>
	<pre><code>{ content }</code></pre>
</div>

<style>
	code{
		color: #c9d1d9;
	}

	pre{
		padding: 1rem;
	}

	header{
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 1rem;
		color: #58a6ff;
		border-bottom: solid 1px #1f6feb;
		
		padding: 1rem;
	}

	.container{
		border-width: 2px;
		border-color: #1f6feb;
		border-style: solid;
		border-radius: 5px;
	}
	
</style>