refactor(lib): move componenets to modules

1 files changed, 41 insertions, 0 deletions

diff --git a/src/lib/Image/FallbackImage.svelte b/src/lib/Image/FallbackImage.svelte
new file mode 100644
index 00000000..3f5e8758
--- /dev/null
+++ b/src/lib/Image/FallbackImage.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let source: string | undefined | null;
+	export let alternative: string | undefined | null;
+	export let fallback: string | undefined | null;
+	export let maxReplaceCount = 1;
+	export let replaceDelay = 1000;
+	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
+	export let hideOnError = false;
+	export let style = '';
+
+	let replaceCount = 0;
+
+	const delayedReplace = (event: Event, image: string | undefined | null) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<img
+		src={source}
+		alt={alternative}
+		loading="lazy"
+		class="badge"
+		on:error={(e) => delayedReplace(e, fallback)}
+		{style}
+	/>
+{:else if !hideOnError}
+	<img src={error} alt="Not found" loading="lazy" class="badge" />
+{/if}
+
+<style>
+	.badge {
+		border-radius: 8px;
+	}
+</style>