src/lib/components/ImageCard.svelte

<script lang="ts">
	export let item: any;
	import { createEventDispatcher } from "svelte";
	const dispatch = createEventDispatcher();
</script>

<button
	class="group relative rounded-xl bg-slate-200 overflow-hidden shadow"
	on:click={() => dispatch("open")}
>
	<img
		loading="lazy"
		src={item.thumb}
		alt={item.file}
		class="w-full h-auto block"
	/>
	<div
		class="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2 flex justify-between"
	>
		<span class="truncate">{item.file}</span>
		{#if item.score}<span>{Math.round(item.score.levenshtein * 100)}%</span
			>{/if}
	</div>
</button>