Improve ExampleScreenshot when image is not available, with fallback icon

Author: techniq

docs/src/lib/components/ComponentLink.svelte

@@ -49,7 +49,14 @@
 
 <ImageLink {href} {variant} {...restProps}>
 	{#snippet image()}
-		<ExampleScreenshot {component} {example} {aspect} background {viewTransitionName} />
+		<ExampleScreenshot
+			{component}
+			{example}
+			{aspect}
+			background
+			{viewTransitionName}
+			fallbackIcon={LucideBlocks}
+		/>
 	{/snippet}
 
 	{#snippet label()}

docs/src/lib/components/ExampleScreenshot.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
 	import { cls } from '@layerstack/tailwind';
+	import type { Component } from 'svelte';
 
 	let {
 		component,
 		example,
 		aspect = 'initial',
 		background = false,
 		viewTransitionName = null,
+		fallbackIcon,
 		class: className
 	}: {
 		component: string;
 		example: string;
 		aspect?: 'initial' | 'video' | 'square' | 'screenshot';
 		background?: boolean;
 		viewTransitionName?: string | null;
+		fallbackIcon?: Component;
 		class?: string;
 	} = $props();
 
+	let hasError = $state(false);
+
 	const basePath = $derived(`/screenshots/${component}/${example}`);
 
 	const sizes = [
@@ -41,17 +46,25 @@
 	)}
 	style:view-transition-name={viewTransitionName}
 >
-	{#each ['light', 'dark'] as mode}
-		{#each sizes as size}
-			<img
-				src="{basePath}-{mode}-{size.width}.webp"
-				alt="{component} - {example}"
-				class={cls(
-					'w-full h-full object-scale-down object-center p-2',
-					mode === 'light' ? size.light : 'hidden ' + size.dark
-				)}
-				loading="lazy"
-			/>
+	{#if hasError && fallbackIcon}
+		{@const FallbackIcon = fallbackIcon}
+		<div class="w-full h-full flex items-center justify-center text-surface-content/30">
+			<FallbackIcon class="size-12" />
+		</div>
+	{:else if !hasError}
+		{#each ['light', 'dark'] as mode (mode)}
+			{#each sizes as size (size.width)}
+				<img
+					src="{basePath}-{mode}-{size.width}.webp"
+					alt="{component} - {example}"
+					class={cls(
+						'w-full h-full object-scale-down object-center p-2',
+						mode === 'light' ? size.light : 'hidden ' + size.dark
+					)}
+					loading="lazy"
+					onerror={() => (hasError = true)}
+				/>
+			{/each}
 		{/each}
-	{/each}
+	{/if}
 </div>