Add rating stars

frontend/src/lib/components/EditAdventure.svelte

@@ -279,11 +279,63 @@
 						type="number"
 						min="0"
 						max="5"
-						name="rating"
+						hidden
-						id="rating"
 						bind:value={adventureToEdit.rating}
+						id="rating"
+						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="rating -ml-3 mt-1 mb-4">
+						<input
+							type="radio"
+							name="rating-2"
+							class="rating-hidden"
+							checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							checked={adventureToEdit.rating === 1}
+							on:click={() => (adventureToEdit.rating = 1)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 2)}
+							checked={adventureToEdit.rating === 2}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 3)}
+							checked={adventureToEdit.rating === 3}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 4)}
+							checked={adventureToEdit.rating === 4}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 5)}
+							checked={adventureToEdit.rating === 5}
+						/>
+						{#if adventureToEdit.rating}
+							<button
+								type="button"
+								class="btn btn-sm btn-error ml-2"
+								on:click={() => (adventureToEdit.rating = NaN)}
+							>
+								Remove
+							</button>
+						{/if}
 					</div>
 					<input
 						type="text"
@@ -346,6 +398,7 @@
 					>
 					<!-- if there is a button in form, it will close the modal -->
 					<button class="btn mt-4" on:click={close}>Close</button>
+				</div>
 			</form>
 			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
 		</div>

frontend/src/lib/components/NewAdventure.svelte

@@ -326,11 +326,59 @@
 						type="number"
 						min="0"
 						max="5"
+						hidden
 						bind:value={newAdventure.rating}
 						id="rating"
 						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="rating -ml-3 mt-1">
+						<input
+							type="radio"
+							name="rating-2"
+							class="rating-hidden"
+							checked={Number.isNaN(newAdventure.rating)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 1)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 2)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 3)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 4)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 5)}
+						/>
+						{#if newAdventure.rating}
+							<button
+								type="button"
+								class="btn btn-sm btn-error ml-2"
+								on:click={() => (newAdventure.rating = NaN)}
+							>
+								Remove
+							</button>
+						{/if}
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="link"

frontend/src/routes/adventures/[id]/+page.svelte

@@ -92,10 +92,10 @@
 		<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.image}
+					{#if adventure.images && adventure.images.length > 0}
 						<div>
 							<img
-								src={adventure.image}
+								src={adventure.images[0].image}
 								alt={adventure.name}
 								width="1200"
 								height="600"