add breadcrumbs to area routes

teambtcmap · May 17, 2024 · 65932fc · 65932fc
1 parent 99dd4f9
commit 65932fc
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 6 deletions.
diff --git a/src/components/Breadcrumbs.svelte 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />