feat(BadgePreview): navigate using badge side

1 files changed, 21 insertions, 7 deletions

diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index fba6e2e5..ac9519c5 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -9,6 +9,8 @@
 	import { tweened } from 'svelte/motion';
 
 	export let selectedBadge: Badge | undefined;
+	export let onNext: () => void = () => {};
+	export let onPrevious: () => void = () => {};
 
 	let badgeReference: HTMLImageElement;
 	const mouse = tweened(
@@ -95,6 +97,16 @@
 
 		return `<a href="${userLink}" target="_blank">@${name}</a>`;
 	};
+
+	const onClick = (event: MouseEvent) => {
+		event.preventDefault();
+
+		if (event.clientX < badgeReference.getBoundingClientRect().left + badgeReference.width / 2) {
+			onPrevious();
+		} else {
+			onNext();
+		}
+	};
 </script>
 
 {#if selectedBadge}
@@ -106,13 +118,15 @@
 				role="img"
 				class="badge-container"
 			>
-				<img
-					src={cdn(thumbnail(selectedBadge.image))}
-					bind:this={badgeReference}
-					style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
-						10}deg);"
-					alt={selectedBadge.description}
-				/>
+				<a href={'#'} on:click={onClick}>
+					<img
+						src={cdn(thumbnail(selectedBadge.image))}
+						bind:this={badgeReference}
+						style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
+							10}deg);"
+						alt={selectedBadge.description}
+					/>
+				</a>
 			</div>
 
 			<p />