From d552c503495b37ce551ce9997ed04c20f9b17af1 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 17 Aug 2024 17:22:01 -0400
Subject: [PATCH] adventure view

---
 .../src/lib/components/AdventureCard.svelte   |  8 ----
 .../src/routes/adventures/[id]/+page.svelte   | 43 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index b232e8e..2e090ff 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -131,14 +131,6 @@
 
 	let currentSlide = 0;
 
-	function nextSlide() {
-		currentSlide = (currentSlide + 1) % adventure.images.length;
-	}
-
-	function prevSlide() {
-		currentSlide = (currentSlide - 1 + adventure.images.length) % adventure.images.length;
-	}
-
 	function goToSlide(index: number) {
 		currentSlide = index;
 	}
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 2ad349c..6b9ff2a 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -26,6 +26,12 @@
 
 	let adventure: Adventure;
 
+	let currentSlide = 0;
+
+	function goToSlide(index: number) {
+		currentSlide = index;
+	}
+
 	let notFound: boolean = false;
 	let isEditModalOpen: boolean = false;
 
@@ -92,7 +98,7 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					{#if adventure.images && adventure.images.length > 0}
+					<!-- {#if adventure.images && adventure.images.length > 0}
 						<div>
 							<img
 								src={adventure.images[0].image}
@@ -103,7 +109,42 @@
 								style="aspect-ratio: 1200 / 600; object-fit: cover;"
 							/>
 						</div>
+					{/if} -->
+					{#if adventure.images && adventure.images.length > 0}
+						<div class="carousel w-full">
+							{#each adventure.images as image, i}
+								<div
+									class="carousel-item w-full"
+									style="display: {i === currentSlide ? 'block' : 'none'}"
+								>
+									<img
+										src={image.image}
+										width="1200"
+										height="600"
+										class="w-full h-auto object-cover rounded-lg"
+										style="aspect-ratio: 1200 / 600; object-fit: cover;"
+										alt={adventure.name}
+									/>
+									<div class="flex justify-center w-full py-2 gap-2">
+										{#each adventure.images as _, i}
+											<button
+												on:click={() => goToSlide(i)}
+												class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
+											>
+										{/each}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<!-- svelte-ignore a11y-img-redundant-alt -->
+						<img
+							src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
+							alt="No image available"
+							class="w-full h-48 object-cover"
+						/>
 					{/if}
+
 					<div class="grid gap-4">
 						<div class="flex items-center justify-between">
 							<div>