From 65932fcd04e582330129ee8eda7c778c62d86b2c Mon Sep 17 00:00:00 2001
From: secondl1ght <secondl1ght@protonmail.com>
Date: Thu, 16 May 2024 23:44:14 -0600
Subject: [PATCH] add breadcrumbs to area routes

---
 src/components/Breadcrumbs.svelte             | 20 +++++++++++++++++++
 src/lib/comp.ts                               |  1 +
 src/routes/communities/add/+page.svelte       |  7 +++++++
 .../communities/leaderboard/+page.svelte      | 15 +++++++++++++-
 src/routes/community/[area]/+page.svelte      | 10 ++++++++--
 src/routes/countries/leaderboard/+page.svelte | 15 +++++++++++++-
 src/routes/country/[area]/+page.svelte        | 10 ++++++++--
 7 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Breadcrumbs.svelte

diff --git a/src/components/Breadcrumbs.svelte b/src/components/Breadcrumbs.svelte
new file mode 100644
index 00000000..c262ae28
--- /dev/null
+++ b/src/components/Breadcrumbs.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	type Routes = { name: string; url: string }[];
+	export let routes: Routes;
+</script>
+
+<div class="mx-auto flex w-full flex-wrap items-center gap-3 px-4 py-5 xl:w-[1200px] xl:px-0">
+	{#each routes as route, index}
+		<a
+			href={route.url}
+			class="text-sm text-link transition-colors hover:text-hover {index === routes.length - 1
+				? 'font-bold'
+				: 'font-normal'}"
+		>
+			{route.name}
+		</a>
+		{#if index !== routes.length - 1}
+			<i class="fa-solid fa-chevron-right w-2 text-link" />
+		{/if}
+	{/each}
+</div>
diff --git a/src/lib/comp.ts b/src/lib/comp.ts
index 554b8ebe..66a8115b 100644
--- a/src/lib/comp.ts
+++ b/src/lib/comp.ts
@@ -17,6 +17,7 @@ export { default as AreaStats } from '../components/AreaStats.svelte';
 export { default as AreaTickets } from '../components/AreaTickets.svelte';
 export { default as BadgeCard } from '../components/BadgeCard.svelte';
 export { default as Boost } from '../components/Boost.svelte';
+export { default as Breadcrumbs } from '../components/Breadcrumbs.svelte';
 export { default as CloseButton } from '../components/CloseButton.svelte';
 export { default as CommunityCard } from '../components/CommunityCard.svelte';
 export { default as CommunitySection } from '../components/CommunitySection.svelte';
diff --git a/src/routes/communities/add/+page.svelte b/src/routes/communities/add/+page.svelte
index dfac2af8..37e99031 100644
--- a/src/routes/communities/add/+page.svelte
+++ b/src/routes/communities/add/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import {
+		Breadcrumbs,
 		Footer,
 		FormSuccess,
 		Header,
@@ -13,6 +14,11 @@
 	import axios from 'axios';
 	import { onMount } from 'svelte';
 
+	const routes = [
+		{ name: 'Communities', url: '/communities' },
+		{ name: 'Add', url: '/communities/add' }
+	];
+
 	let captcha: HTMLDivElement;
 	let captchaSecret: string;
 	let captchaInput: HTMLInputElement;
@@ -139,6 +145,7 @@
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
+	<Breadcrumbs {routes} />
 	<div class="mx-auto w-10/12 xl:w-[1200px]">
 		{#if !submitted}
 			{#if typeof window !== 'undefined'}
diff --git a/src/routes/communities/leaderboard/+page.svelte b/src/routes/communities/leaderboard/+page.svelte
index 90c23d17..c4d3826b 100644
--- a/src/routes/communities/leaderboard/+page.svelte
+++ b/src/routes/communities/leaderboard/+page.svelte
@@ -1,7 +1,19 @@
 <script lang="ts">
-	import { AreaLeaderboard, Footer, Header, HeaderPlaceholder, PrimaryButton } from '$lib/comp';
+	import {
+		AreaLeaderboard,
+		Breadcrumbs,
+		Footer,
+		Header,
+		HeaderPlaceholder,
+		PrimaryButton
+	} from '$lib/comp';
 	import { theme } from '$lib/store';
 	import { detectTheme } from '$lib/utils';
+
+	const routes = [
+		{ name: 'Communities', url: '/communities' },
+		{ name: 'Leaderboard', url: '/communities/leaderboard' }
+	];
 </script>
 
 <svelte:head>
@@ -13,6 +25,7 @@
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
+	<Breadcrumbs {routes} />
 
 	<main class="mt-10">
 		<div class="mx-auto w-10/12 space-y-10 xl:w-[1200px]">
diff --git a/src/routes/community/[area]/+page.svelte b/src/routes/community/[area]/+page.svelte
index 0b45c0ac..923e0ccd 100644
--- a/src/routes/community/[area]/+page.svelte
+++ b/src/routes/community/[area]/+page.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
 	export let data: AreaPageProps;
 
-	import { AreaPage, Footer, Header } from '$lib/comp';
+	import { AreaPage, Breadcrumbs, Footer, Header } from '$lib/comp';
 	import type { AreaPageProps } from '$lib/types';
 
-	const { name } = data;
+	const { name, id } = data;
+
+	const routes = [
+		{ name: 'Communities', url: '/communities' },
+		{ name, url: `/communities/${id}` }
+	];
 </script>
 
 <svelte:head>
@@ -16,6 +21,7 @@
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
+	<Breadcrumbs {routes} />
 	<div class="mx-auto w-10/12 xl:w-[1200px]">
 		<AreaPage type="community" {data} />
 
diff --git a/src/routes/countries/leaderboard/+page.svelte b/src/routes/countries/leaderboard/+page.svelte
index d661e79b..d071ed08 100644
--- a/src/routes/countries/leaderboard/+page.svelte
+++ b/src/routes/countries/leaderboard/+page.svelte
@@ -1,7 +1,19 @@
 <script lang="ts">
-	import { AreaLeaderboard, Footer, Header, HeaderPlaceholder, PrimaryButton } from '$lib/comp';
+	import {
+		AreaLeaderboard,
+		Breadcrumbs,
+		Footer,
+		Header,
+		HeaderPlaceholder,
+		PrimaryButton
+	} from '$lib/comp';
 	import { theme } from '$lib/store';
 	import { detectTheme } from '$lib/utils';
+
+	const routes = [
+		{ name: 'Countries', url: '/countries' },
+		{ name: 'Leaderboard', url: '/countries/leaderboard' }
+	];
 </script>
 
 <svelte:head>
@@ -13,6 +25,7 @@
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
+	<Breadcrumbs {routes} />
 
 	<main class="mt-10">
 		<div class="mx-auto w-10/12 space-y-10 xl:w-[1200px]">
diff --git a/src/routes/country/[area]/+page.svelte b/src/routes/country/[area]/+page.svelte
index 3b8b0c27..933b3b00 100644
--- a/src/routes/country/[area]/+page.svelte
+++ b/src/routes/country/[area]/+page.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
 	export let data: AreaPageProps;
 
-	import { AreaPage, Footer, Header } from '$lib/comp';
+	import { AreaPage, Breadcrumbs, Footer, Header } from '$lib/comp';
 	import type { AreaPageProps } from '$lib/types';
 
-	const { name } = data;
+	const { name, id } = data;
+
+	const routes = [
+		{ name: 'Countries', url: '/countries' },
+		{ name, url: `/countries/${id}` }
+	];
 </script>
 
 <svelte:head>
@@ -16,6 +21,7 @@
 
 <div class="bg-teal dark:bg-dark">
 	<Header />
+	<Breadcrumbs {routes} />
 	<div class="mx-auto w-10/12 xl:w-[1200px]">
 		<AreaPage type="country" {data} />