feat: Add flag URL to Country type and update CountryCard component

frontend/src/lib/components/CountryCard.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { getFlag } from '$lib';
+	import type { Country } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 
-	export let countryName: string | undefined = undefined;
-	export let countryCode: string;
+	export let country: Country;
 
 	async function nav() {
-		goto(`/worldtravel/${countryCode}`);
+		goto(`/worldtravel/${country.country_code}`);
 	}
 </script>
 
@@ -17,15 +17,10 @@
 >
 	<figure>
 		<!-- svelte-ignore a11y-img-redundant-alt -->
-		<img
-			src={getFlag(240, countryCode) ||
-				'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
-			alt="No image available"
-			class="w-full h-48 object-cover"
-		/>
+		<img src={country.flag_url} alt="No image available" class="w-full h-48 object-cover" />
 	</figure>
 	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{countryName}</h2>
+		<h2 class="card-title overflow-ellipsis">{country.name}</h2>
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
 			<button class="btn btn-primary" on:click={nav}>Open</button>

frontend/src/lib/types.ts

@@ -34,6 +34,7 @@ export type Country = {
 	name: string;
 	country_code: string;
 	continent: string;
+	flag_url: string;
 };
 
 export type Region = {

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

@@ -249,7 +249,10 @@
 								{#if data.props.collection}
 									<div>
 										<p class="text-sm text-muted-foreground">Collection</p>
-										<p class="text-base font-medium">{data.props.collection.name}</p>
+										<a
+											class="text-base font-medium link"
+											href="/collections/{data.props.collection.id}">{data.props.collection.name}</a
+										>
 									</div>
 								{/if}
 							</div>

frontend/src/routes/collections/+page.server.ts

@@ -17,7 +17,7 @@ export const load = (async (event) => {
 		let previous = null;
 		let count = 0;
 		let adventures: Adventure[] = [];
-		let initialFetch = await fetch(`${serverEndpoint}/api/collections/`, {
+		let initialFetch = await fetch(`${serverEndpoint}/api/collections/?order_by=updated_at`, {
 			headers: {
 				Cookie: `${event.cookies.get('auth')}`
 			}

frontend/src/routes/collections/+page.svelte

@@ -23,8 +23,6 @@
 
 	let resultsPerPage: number = 25;
 
-	let currentView: string = 'cards';
-
 	let next: string | null = data.props.next || null;
 	let previous: string | null = data.props.previous || null;
 	let count = data.props.count || 0;
@@ -176,18 +174,18 @@
 			>
 				{sidebarOpen ? 'Close Filters' : 'Open Filters'}
 			</button>
-			{#if currentView == 'cards'}
-				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
-					{#each collections as collection}
-						<CollectionCard
-							type=""
-							{collection}
-							on:delete={deleteCollection}
-							on:edit={editCollection}
-						/>
-					{/each}
-				</div>
-			{/if}
+
+			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+				{#each collections as collection}
+					<CollectionCard
+						type=""
+						{collection}
+						on:delete={deleteCollection}
+						on:edit={editCollection}
+					/>
+				{/each}
+			</div>
+
 			<div class="join flex items-center justify-center mt-4">
 				{#if next || previous}
 					<div class="join">
@@ -246,27 +244,9 @@
 						value="name"
 						hidden
 					/>
-					<button type="submit" class="btn btn-primary mt-4">Filter</button>
+					<button type="submit" class="btn btn-success btn-primary mt-4">Filter</button>
 				</form>
 				<div class="divider"></div>
-				<h3 class="text-center font-semibold text-lg mb-4">View</h3>
-				<div class="join">
-					<input
-						class="join-item btn-neutral btn"
-						type="radio"
-						name="options"
-						aria-label="Cards"
-						on:click={() => (currentView = 'cards')}
-						checked
-					/>
-					<input
-						class="join-item btn btn-neutral"
-						type="radio"
-						name="options"
-						aria-label="Table"
-						on:click={() => (currentView = 'table')}
-					/>
-				</div>
 			</div>
 		</ul>
 	</div>

frontend/src/routes/worldtravel/+page.svelte

@@ -13,7 +13,7 @@
 
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each countries as country}
-		<CountryCard countryCode={country.country_code} countryName={country.name} />
+		<CountryCard {country} />
 		<!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
 	{/each}
 </div>