#6 Add imagePost component.

package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "@stellar/stellar-sdk": "^12.0.1",
     "flowbite-svelte": "^0.46.1",
+    "svelte-modals": "^1.3.0",
     "tailwind-merge": "^2.3.0"
   }
 }

src/lib/card/Card.svelte

@@ -31,14 +31,13 @@
   $: imgCls = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-e-lg' : 'md:rounded-s-lg'), imgClass);
 
 </script>
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<Frame tag={href ? 'a' : 'div'} {...$$restProps} border shadow class={cardClass}>
-		{#if img}
+<Frame tag={href ? 'a' : 'div'} {...$$restProps} border shadow class={cardClass}>
+  {#if img}
     <img class={imgCls} src={img} alt="" />
     <div class={innerPadding}>
       <slot />
     </div>
   {:else}
     <slot />
   {/if}
-	</Frame>
+</Frame>

src/lib/frame/frame.svelte

@@ -135,7 +135,7 @@
 </script>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="inline-block"  on:mousemove={handleMouseMove}>
-	<Frame  {...$$restProps} rounded shadow border  on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave} >
+	<Frame  {...$$restProps} rounded shadow border  on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave} on:click>
 		<slot/>
 	</Frame>
 </div>

src/lib/imagePoster/imageModal.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	export let showModal:boolean = false;
+
+	let dialog:HTMLDialogElement; 
+
+	$: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div on:click|stopPropagation>
+		<slot />
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		max-width: 32em;
+		border: none;
+		padding: 0;
+	}
+	dialog::backdrop {
+		background: rgba(21, 18, 18, 0.9);
+	}
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		display: block;
+	}
+</style>

src/lib/imagePoster/imagePoster.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type {  ComponentProps} from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+	import Frame from "../frame/frame.svelte";
+	import type {SizeType} from '$lib/types.js'
+	import {sizes} from '$lib/constants.js';
+	import Modal from './imageModal.svelte';
+
+	let showModal = false;
+
+	export let img: string | undefined = undefined;
+  export let size: SizeType | 'none' = 'sm';
+
+	interface $$Props extends ComponentProps<Frame> {
+    img?: string;
+    padding?: SizeType | 'none';
+    size?: SizeType | 'none';
+	}
+
+ 	let cardClass: string;
+  $: cardClass = twMerge('flex w-full', sizes[size], 'flex-col', $$props.class);
+
+
+</script>
+
+<Frame tag="div" {...$$restProps} border shadow class={cardClass} on:click={() => (showModal = true)}>
+	<img class="rounded-lg hover:cursor-pointer" src={img} alt="" />
+</Frame>
+<Modal bind:showModal>
+	<img class="" src={img} alt="" />
+</Modal>

src/lib/yutubePoster/yutubePoster.svelte

@@ -6,8 +6,6 @@
 	import {sizes, paddings} from '$lib/constants.js';
 	import type {SizeType} from '$lib/types.js'
   
-
-  
   export let padding: SizeType | 'none' = 'lg';
   export let size: SizeType | 'none' = 'sm';
   export let horizontal: boolean = false;

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$lib/card/card.svelte';
   import YutubePoster from '$lib/yutubePoster/yutubePoster.svelte';
+  import ImagePoster from '$lib/imagePoster/imagePoster.svelte';
   import AssetSelector from '$lib/assetSelector/assetSelector.svelte';
   let recordMouseMoveTrack = true;
   let intervalData = 5;
@@ -30,7 +31,7 @@
     </YutubePoster>
     <!--- Image post component-->
     <h3>Image poster component</h3>
-     <Card img="/images/test.png" isMouseTrackRecord={recordMouseMoveTrack} dataURL="http://localhost/api" intervalData={intervalData} padding="none" tag="a" href="/images/test.png"></Card>
+     <ImagePoster img="/images/test.png" isMouseTrackRecord={recordMouseMoveTrack} dataURL="http://localhost/api" intervalData={intervalData} padding="none"></ImagePoster>
     <!--- Assets selector component-->
     <h3>Assets selector component</h3>
     <AssetSelector/>

yarn.lock

@@ -1689,6 +1689,11 @@ svelte-hmr@^0.16.0:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.16.0.tgz#9f345b7d1c1662f1613747ed7e82507e376c1716"
   integrity sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==
 
+svelte-modals@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/svelte-modals/-/svelte-modals-1.3.0.tgz#b02331a178bd31507bf249f710ba5d52f4e064ac"
+  integrity sha512-b1Ylnyv9O6b7VYeWGJVToaVU2lw7GtErVwiEdojyfnOuZcrhNlQ5eDqbTrL3xyKz8j2VTy/QiGUl1lm/6SnQ2A==
+
 svelte-preprocess@^5.1.3:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"