refactor: use backdrop_image component and fix src type issue

quibble-dev · Dec 29, 2024 · 239a07f · 239a07f
1 parent 9d6a523
commit 239a07f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/frontend/src/lib/components/quib.svelte b/frontend/src/lib/components/quib.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import type { components } from '$lib/clients/v1';
   import Avatar from '$lib/components/ui/avatar.svelte';
+  import BackdropImage from '$lib/components/ui/backdrop_image.svelte';
   import { cn } from '$lib/functions/classnames';
   import { FormatDate } from '$lib/functions/date';
   import { is_valid } from '$lib/functions/is_valid';
@@ -44,16 +45,7 @@
       {quib.content}
     </p>
   {:else}
-    <div
-      class="relative z-10 flex max-h-[25rem] cursor-pointer justify-center overflow-hidden rounded-2xl inner-border inner-border-base-content/15"
-    >
-      <!-- blurred img -->
-      <div
-        class="absolute inset-0 -z-10 scale-150 bg-cover bg-center opacity-50 blur-xl"
-        style="background-image: url({quib.cover});"
-      ></div>
-      <img src={quib.cover} alt="" class="object-contain" />
-    </div>
+    <BackdropImage src={quib.cover} class="z-10 max-h-[25rem]" />
   {/if}
 {/snippet}
 

diff --git a/frontend/src/lib/components/ui/backdrop_image.svelte b/frontend/src/lib/components/ui/backdrop_image.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { cn } from '$lib/functions/classnames';
+  import type { Nullable } from '$lib/types/shared';
 
-  type Props = {
-    src: string;
-  } & Partial<{
+  type Props = Partial<{
+    src: Nullable<string>;
     class: string;
     img_class: string;
     backdrop_class: string;
@@ -15,7 +15,7 @@
 <div
   class={cn(
     klass,
-    'relative flex max-h-[25rem] cursor-pointer justify-center overflow-hidden rounded-2xl inner-border inner-border-base-content/15'
+    'relative flex cursor-pointer justify-center overflow-hidden rounded-2xl inner-border inner-border-base-content/15'
   )}
 >
   <!-- blurred img -->

diff --git a/frontend/src/routes/(app)/q/[name]/quibs/[id]/[slug]/+page.svelte b/frontend/src/routes/(app)/q/[name]/quibs/[id]/[slug]/+page.svelte
@@ -90,7 +90,7 @@
     {quib.content}
   </p>
 {:else}
-  <BackdropImage src={quib.cover as string} />
+  <BackdropImage src={quib.cover} class="max-h-[25rem]" />
 {/if}
 <!-- quib options like vote share and more -->
 <div class="flex items-center gap-4">