56 lines
1.2 KiB
Svelte
56 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { FSNode } from 'lib/FilesystemAPI.svelte';
|
|
import { run } from 'svelte/legacy';
|
|
|
|
let { path = [] }: {path: FSNode[]} = $props();
|
|
|
|
let image_uri: string = $state()
|
|
let image_link: string = $state()
|
|
const update_links = (path: FSNode[]) => {
|
|
image_uri = null
|
|
image_link = null
|
|
for (let node of path) {
|
|
if (node.properties && node.properties.branding_enabled === "true") {
|
|
if (node.properties.brand_header_image) {
|
|
image_uri = "/api/filesystem/"+node.properties.brand_header_image
|
|
}
|
|
if (node.properties.brand_header_link) {
|
|
image_link = node.properties.brand_header_link
|
|
}
|
|
}
|
|
}
|
|
}
|
|
run(() => {
|
|
update_links(path)
|
|
});
|
|
</script>
|
|
|
|
{#if image_uri}
|
|
<div class="container">
|
|
{#if image_link}
|
|
<a class="link" href={image_link} target="_blank" rel="noreferrer">
|
|
<img class="image" src="{image_uri}" alt="User-provided banner"/>
|
|
</a>
|
|
{:else}
|
|
<img class="image" src="{image_uri}" alt="User-provided banner"/>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.container {
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
}
|
|
.link {
|
|
display: block;
|
|
}
|
|
.image {
|
|
display: block;
|
|
margin: auto;
|
|
max-height: 90px;
|
|
max-width: 99%;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|