feat: replace placeholder image with gradient background and text for…

… no image available state in CardCarousel component
seanmorley15 · Jan 20, 2025 · 1f3abf7 · 1f3abf7
1 parent 94c3e3d
commit 1f3abf7
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/frontend/src/lib/components/CardCarousel.svelte b/frontend/src/lib/components/CardCarousel.svelte
@@ -95,11 +95,14 @@
 			</div>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y-img-redundant-alt -->
-		<img
-			src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`}
-			alt="No image available"
-			class="w-full h-48 object-cover"
-		/>
+		<!-- add a figure with a gradient instead -  -->
+		<div class="w-full h-48 bg-gradient-to-r from-success via-base to-primary relative">
+			<!-- subtle button bottom left text -->
+			<div
+				class="absolute bottom-0 left-0 px-2 py-1 text-md font-medium bg-neutral rounded-tr-lg shadow-md"
+			>
+				{$t('adventures.no_image_found')}
+			</div>
+		</div>
 	{/if}
 </figure>