From f0448d250662179a7543cb98338b3bd4677933a0 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 5 May 2024 12:36:08 +0100
Subject: [PATCH] feat(*): Add basket functionality to all pages

---
 src/routes/+layout.svelte | 56 ++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3720c73..36f815b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import 'tailwindcss/tailwind.css';
 	import { onDestroy, onMount } from 'svelte';
+	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
 	import { user } from '$lib/stores/user.js';
 	import { type User } from '@supabase/auth-js';
 	import SignIn from '$lib/components/SignIn.svelte';
@@ -16,6 +17,12 @@
 	});
 	onDestroy(unsubscribe);
 
+	let localBasket: Basket;
+	const unsubscribeToBasket = basket.subscribe((value) => {
+		localBasket = value;
+	});
+	onDestroy(unsubscribeToBasket);
+
 	onMount(async () => {
 		await getUser();
 	});
@@ -67,7 +74,7 @@
 				<ul
 					class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 text-base-content rounded-box w-52"
 				>
-					<li><a href="/">Item 1</a></li>
+					<li><a href="/products">Products</a></li>
 					<li>
 						<!-- svelte-ignore a11y-missing-attribute -->
 						<a>Parent</a>
@@ -83,7 +90,7 @@
 		</div>
 		<div class="navbar-center hidden lg:flex">
 			<ul class="menu menu-horizontal px-1">
-				<li><a href="/">Item 1</a></li>
+				<li><a href="/products">Products</a></li>
 				<li>
 					<details>
 						<summary>Parent</summary>
@@ -97,35 +104,24 @@
 			</ul>
 		</div>
 		<div class="navbar-end">
-			<div class="dropdown dropdown-end">
-				<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
-					<div class="indicator">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-5 w-5"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							><path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
-							/></svg
-						>
-						<span class="badge badge-sm indicator-item">8</span>
-					</div>
+			<a href="/checkout" class="btn btn-ghost btn-circle">
+				<div class="indicator">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						><path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+						/></svg
+					>
+					<span class="badge badge-sm indicator-item">{localBasket.items.length}</span>
 				</div>
-				<div class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow">
-					<div class="card-body">
-						<span class="font-bold text-lg">8 Items</span>
-						<span class="text-info">Subtotal: $999</span>
-						<div class="card-actions">
-							<a class="btn btn-primary btn-block" href="/checkout">View basket</a>
-						</div>
-					</div>
-				</div>
-			</div>
+			</a>
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 					<div class="w-10 rounded-full">