Added the moder image component

Author: navneetsharmaui

src/lib/shared/ui/components/modern-image/ModernImage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { IModernImage } from '$models/interfaces/imodern-image.interface';
+
+	export let modernImages!: IModernImage[];
+
+	$: modernJPEG = modernImages.find((x) => x.isJPEG);
+</script>
+
+<picture>
+	{#each modernImages as modernImage, index (modernImage.imageUrl)}
+		<source
+			srcset="{modernImage.imageUrl}"
+			type="{modernImage.imageType}"
+			width="{modernImage.imageWidth}"
+			height="{modernImage.imageHeight}"
+		/>
+	{/each}
+	<img
+		class="{modernJPEG.css}"
+		alt="{modernJPEG.imageAlt}"
+		loading="eager"
+		decoding="async"
+		width="{modernJPEG.imageWidth}"
+		height="{modernJPEG.imageHeight}"
+		src="{modernJPEG.imageUrl}"
+	/>
+</picture>

src/lib/shared/ui/components/modern-image/index.ts

@@ -0,0 +1 @@
+export { default as ModernImage } from './ModernImage.svelte';