From 6e39a9784d1934b182a4a02b2c39d6c0bec59bd8 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 15 Aug 2024 21:16:02 -0400
Subject: [PATCH] carousel

---
 .../src/lib/components/AdventureCard.svelte   | 21 +++++++++++++++++--
 frontend/src/lib/types.ts                     |  5 ++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index fe7d41d..895c968 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -154,8 +154,25 @@
 >
 	<figure>
 		<!-- svelte-ignore a11y-img-redundant-alt -->
-		{#if adventure.image && adventure.image !== ''}
-			<img src={adventure.image} alt="Adventure Image" class="w-full h-48 object-cover" />
+		{#if adventure.images && adventure.images.length > 0}
+			<div class="carousel w-full">
+				{#each adventure.images as image, i}
+					<div id="slide{i}" class="carousel-item relative w-full">
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
+						<div
+							class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between"
+						>
+							{#if i > 0}
+								<a href="#slide{i - 1}" class="btn btn-circle">❮</a>
+							{/if}
+							{#if i < adventure.images.length - 1}
+								<a href="#slide{i + 1}" class="btn btn-circle">❯</a>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
 		{:else}
 			<img
 				src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index b00cf35..17f4f51 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -19,7 +19,10 @@ export type Adventure = {
 	description?: string | null;
 	rating?: number | null;
 	link?: string | null;
-	image?: string | null;
+	images: {
+		id: string;
+		image: string;
+	}[];
 	date?: string | null; // Assuming date is a string in 'YYYY-MM-DD' format
 	collection?: string | null;
 	latitude: number | null;