From 3f44e70fa01dce7e4598bc2f050af859ea7e8007 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 23 Jan 2024 15:55:17 +0100
Subject: [PATCH] feat: add custom icons and type

---
 .../site/image-fade-carousel.svelte           | 29 ++++++++-----------
 src/routes/+page.svelte                       | 15 ++++++++--
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/site/image-fade-carousel.svelte b/src/lib/components/site/image-fade-carousel.svelte
index 8d4a930..af65021 100644
--- a/src/lib/components/site/image-fade-carousel.svelte
+++ b/src/lib/components/site/image-fade-carousel.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, type ComponentType } from 'svelte';
 	import { Button } from '../ui/button';
-	import { Eye } from 'lucide-svelte';
+	import type { Icon } from 'lucide-svelte';
 
-	export let images: { src: string; alt: string; style?: string }[] = [];
+	export let images: { src: string; alt: string; style?: string; icon: ComponentType<Icon> }[] = [];
 
 	let index = 0;
 	/* global NodeJS */
@@ -28,30 +28,25 @@
 		<enhanced:img
 			src={img.src}
 			alt={img.alt}
-			class:current-img={index === i}
-			class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style}"
+			class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style} {index ===
+				i && 'opacity-100'}"
 		/>
 	{/each}
 	<div class="absolute bottom-[2.5%] left-[50%] grid translate-x-[-50%] grid-flow-col gap-2">
-		{#each images as _, i (_.src)}
+		{#each images as img, i}
 			<Button
 				variant="outline"
-				class={index === i ? 'opacity-80' : 'opacity-30'}
+				class={index === i ? '' : 'opacity-60'}
 				size="icon"
 				aria-label={`Toggle image ${i + 1}`}
 				on:click={() => handleMarkerClick(i)}
 			>
-				<Eye class="transition-fill ease-outmuted h-4 w-4 " />
+				<svelte:component
+					this={img.icon}
+					{...$$props}
+					class="transition-fill ease-outmuted h-4 w-4"
+				/>
 			</Button>
 		{/each}
 	</div>
 </div>
-
-<style>
-	.current-img {
-		opacity: 1;
-	}
-	.current-marker {
-		fill: white;
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 91b0000..9d27120 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,10 +7,21 @@
 
 	import catImg from '$lib/assets/root-cat.jpg?enhanced';
 	import meImg from '$lib/assets/root-me.jpg?enhanced';
+	import { Cat, PersonStanding } from 'lucide-svelte';
 
 	const images = [
-		{ src: meImg, alt: 'Portrait of Bart van der Braak', style: 'object-[50%_10%]' },
-		{ src: catImg, alt: 'Noire yawning cat and a bottle of whiskey with glass', style: '' }
+		{
+			src: meImg,
+			alt: 'Portrait of Bart van der Braak',
+			style: 'object-[50%_10%]',
+			icon: PersonStanding
+		},
+		{
+			src: catImg,
+			alt: 'Noire yawning cat and a bottle of whiskey with glass',
+			style: '',
+			icon: Cat
+		}
 	];
 
 	$: title = $page.data.title;