teoldalad/lib/components/bio/elements/BannerContainer.svelte
2024-03-13 00:30:45 +01:00

40 lines
1 KiB
Svelte

<script lang="ts">
import Banner from './Banner.svelte';
import { getBioBanner } from '$lib/config';
import { editorStore } from '$lib/stores/editor';
import { page } from '$app/stores';
export let loadTime: number | undefined = undefined;
export let bioId: number | undefined = undefined;
export let simple: boolean = false;
$: noBanner =
($page.data.bio?.hasBanner !== true && $editorStore.banner == null) ||
$editorStore.edits.edits.deleteBanner != null;
$: isEditor = $page.url.pathname.startsWith('/dashboard');
$: banner = noBanner
? undefined
: $editorStore.banner
? $editorStore.banner
: bioId
? getBioBanner(bioId, isEditor ? loadTime : undefined)
: undefined;
</script>
<div class="w-full grid">
{#if !simple}
<div class="w-full blur-[70px] opacity-40 dark:opacity-80 transition-opacity">
<Banner {banner} />
</div>
{/if}
<div class="w-full z-[1]">
<Banner {banner} />
</div>
</div>
<style lang="postcss">
div > div {
@apply col-start-1 row-start-1;
}
</style>