init

lib/components/bio/elements/BannerContainer.svelte

@@ -0,0 +1,40 @@
+<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>