fix(images): added image preview

src/lib/components/search/load/LoadImage.svelte

@@ -1,6 +1,5 @@
 <div class="animate-pulse">
 	<div class="h-full w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-gray-700">
 		<div class="h-48 w-64 object-cover"></div>
-		<!-- Image loading skeleton -->
 	</div>
 </div>

src/lib/components/search/result/ResultImage.svelte

@@ -4,16 +4,28 @@
 
 	// parameters
 	export let result: ResultType;
-	export let imgResultPreview: ResultType;
+	export let imgResultPreview: ResultType | undefined;
 
 	// variables
 	const loading = result.Rank > 10 ? 'lazy' : 'eager';
+	$: selected = imgResultPreview === result;
+
+	// functions
+	function openImage() {
+		if (selected) {
+			imgResultPreview = undefined;
+		} else {
+			imgResultPreview = result;
+		}
+	}
 </script>
 
-<article id="result-{result.Rank}">
+<article id="image-{result.Rank}">
 	<button
+		class:ring-4={selected}
+		class:ring-hearchco-primary={selected}
 		class="h-full w-full overflow-hidden rounded-lg"
-		on:click={() => (imgResultPreview = result)}
+		on:click={() => openImage()}
 	>
 		<img
 			id="img-{result.Rank}"

src/lib/components/search/result/ResultImagePreview.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	// types
+	import type { ResultType } from '$lib/types/result';
+
+	// parameters
+	export let result: ResultType;
+</script>
+
+<div id="image-preview-{result.Rank}" class="px-4 pt-4 pb-10 w-full lg:sticky lg:top-0">
+	<a href={result.URL}>
+		<img
+			id="link-{result.Rank}"
+			src={result.ImageResult.ThumbnailURL}
+			alt={result.Title}
+			class="w-full h-auto hover:ring-2 hover:ring-hearchco-primary object-cover transform transition duration-200 ease-in-out"
+		/>
+	</a>
+	<a href={result.ImageResult.SourceURL}>
+		<h1 id="title-{result.Rank}" class="pt-5 text-hearchco-primary text-xl hover:underline">
+			{result.Title}
+		</h1>
+	</a>
+	<p id="description-{result.Rank}" class="text-justify text-sm text-gray-600 dark:text-gray-200">
+		{result.Description}
+	</p>
+	<div id="engines-{result.Rank}" class="pt-2 text-right text-xs text-gray-800 dark:text-gray-400">
+		{#each result.EngineRanks as engineRank (engineRank.SearchEngine)}
+			<span class="mx-0.5">{engineRank.SearchEngine}</span>
+		{/each}
+	</div>
+</div>

src/lib/components/search/result/Results.svelte

@@ -2,6 +2,7 @@
 	// components
 	import Result from '$lib/components/search/result/Result.svelte';
 	import ResultImage from '$lib/components/search/result/ResultImage.svelte';
+	import ResultImagePreview from '$lib/components/search/result/ResultImagePreview.svelte';
 	import Error from '$lib/components/Error.svelte';
 
 	// functions
@@ -15,26 +16,36 @@
 	export let query;
 	export let results: ResultType[];
 
-	let imgResultPreview: ResultType;
+	let imgResultPreview: ResultType | undefined = results[0];
 
 	// variables
 	const category = categoryFrom(query);
 </script>
 
 <!-- todo: await deep results and offer button to switch to them -->
 {#if category === CategoryEnum.IMAGES}
-	{#if imgResultPreview}
-		<!-- todo: actual preview of image -->
-		<p>{imgResultPreview.Title}</p>
-	{/if}
-	<div class="px-4 py-8">
-		<section id="images" class="flex flex-wrap justify-center gap-2">
+	<div class="w-full lg:flex px-4 py-8">
+		{#if imgResultPreview !== undefined}
+			<div id="image-preview" class="lg:hidden">
+				<ResultImagePreview result={imgResultPreview} />
+			</div>
+		{/if}
+		<section
+			id="images"
+			class:tw-w-2-3={imgResultPreview !== undefined}
+			class="flex flex-wrap justify-center gap-2"
+		>
 			{#each results as result (result.URL)}
 				<div class="flex-none">
 					<ResultImage {result} bind:imgResultPreview />
 				</div>
 			{/each}
 		</section>
+		{#if imgResultPreview !== undefined}
+			<div id="image-preview" class="hidden lg:block w-1/3">
+				<ResultImagePreview result={imgResultPreview} />
+			</div>
+		{/if}
 	</div>
 {:else if category !== undefined}
 	<div class="sm:mx-auto mb-4 max-w-screen-sm">
@@ -50,3 +61,11 @@
 {:else}
 	<Error statusCode={'500'} message={'Unknown category requested.'} />
 {/if}
+
+<style>
+	@media (min-width: 1024px) {
+		.tw-w-2-3 {
+			@apply w-2/3;
+		}
+	}
+</style>