From 27cbd543cece74228680d74f276eca89e13b557b Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 20:45:19 -0600
Subject: add user public page

---
 src/components/AppHeader.svelte    | 84 ++++++++++++++++++---------------
 src/lib/utils.js                   |  4 ++
 src/routes/[username]/index.svelte | 96 ++++++++++++++++++++++++++++++++------
 src/routes/__layout.svelte         | 11 ++++-
 4 files changed, 143 insertions(+), 52 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9f73adbf..d0123650 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -5,6 +5,8 @@
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 
+	export let avatarPosition = 'left-[calc(50vw-48px)]';
+
 	const menuButtons = [
 		{ title: 'Customers', icon: 'customers', goto: 'customers' },
 		{ title: 'Dashboard', icon: 'dash', goto: 'dashboard' },
@@ -24,48 +26,54 @@
 	};
 </script>
 
-<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
+<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
-		<a href={`/${$user.username}/receive`}>
-			<button class="bg-white p-2 rounded-full w-12 h-12"
-				><Icon icon="numpad" style="mx-auto" />
-			</button>
-		</a>
-		<a href={`/${$user.username}/transactions`}>
-			<button class="bg-white p-2 rounded-full  w-12 h-12"
-				><Icon icon="clock" style="mx-auto" />
-			</button>
-		</a>
-		<a href={`/${$user.username}`}>
-			<button class="bg-white p-2 rounded-full  w-12 h-12"
-				><Icon icon="profile" style="mx-auto" />
-			</button>
-		</a>
-		<div class="relative">
-			<button class="bg-white p-2 rounded-full  w-12 h-12" on:click={() => (showMenu = !showMenu)}
-				><Icon icon="menu" style="mx-auto" />
-			</button>
-			<div
-				class="{showMenu
-					? 'block'
-					: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
-			>
-				<ul class="space-y-5 w-32">
-					{#each menuButtons as button}
-						<li>
-							<button
-								class="flex justify-center items-center font-semibold text-sm"
-								on:click={() => handleMenuItemClick(button.goto)}
-								><Icon icon={button.icon} style="mr-1" /> {button.title}
-							</button>
-						</li>
-					{/each}
-				</ul>
+		{#if $user}
+			<a href={`/${$user.username}/receive`}>
+				<button class="bg-white p-2 rounded-full w-12 h-12"
+					><Icon icon="numpad" style="mx-auto" />
+				</button>
+			</a>
+			<a href={`/${$user.username}/transactions`}>
+				<button class="bg-white p-2 rounded-full  w-12 h-12"
+					><Icon icon="clock" style="mx-auto" />
+				</button>
+			</a>
+			<a href={`/${$user.username}`}>
+				<button class="bg-white p-2 rounded-full  w-12 h-12"
+					><Icon icon="profile" style="mx-auto" />
+				</button>
+			</a>
+			<div class="relative">
+				<button class="bg-white p-2 rounded-full  w-12 h-12" on:click={() => (showMenu = !showMenu)}
+					><Icon icon="menu" style="mx-auto" />
+				</button>
+				<div
+					class="{showMenu
+						? 'block'
+						: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
+				>
+					<ul class="space-y-5 w-32">
+						{#each menuButtons as button}
+							<li>
+								<button
+									class="flex justify-center items-center font-semibold text-sm"
+									on:click={() => handleMenuItemClick(button.goto)}
+									><Icon icon={button.icon} style="mr-1" /> {button.title}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				</div>
 			</div>
-		</div>
+		{:else}
+			<a href="/login">
+				<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm">Sign in </button>
+			</a>
+		{/if}
 	</nav>
 	<div
-		class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
+		class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
 	>
 		<Icon icon="logo-symbol-white" style="mx-auto" />
 	</div>
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 22c88522..7831c519 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -17,3 +17,7 @@ export const post = (url, body) =>
 		body: JSON.stringify(body),
 		headers: { accept: 'application/json', 'content-type': 'application/json' }
 	}).then((r) => r.json());
+
+export const copy = (text) => {
+	navigator.clipboard.writeText(text);
+};
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
index 90d0c04a..a53b94cc 100644
--- a/src/routes/[username]/index.svelte
+++ b/src/routes/[username]/index.svelte
@@ -1,24 +1,94 @@
 <script>
+	import { toast } from '@zerodevx/svelte-toast';
+	import { browser } from '$app/env';
+	import { onMount } from 'svelte';
 	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
+	import { copy } from '$lib/utils';
 	export let username;
+
+	//this needs to be pulled from user
+	let lightning = 'lnbc1p3dzl8tpp5jgq2dxefjdhvmvs3uvtjc';
+
+	onMount(async () => {
+		if (browser) {
+			let { default: QRCodeStyling } = await import('qr-code-styling');
+			const qrCode = new QRCodeStyling({
+				width: window.screen.width < 640 ? 250 : 300,
+				type: 'svg',
+				data: 'add static qr here',
+				image: '/images/invoice.svg',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
+				dotsOptions: {
+					type: 'rounded'
+				},
+				imageOptions: {
+					hideBackgroundDots: false
+				}
+			});
+
+			qrCode.append(document.getElementById('qr'));
+		}
+	});
+
+	let followed = false;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 100);
+
+	const handleCopy = () => {
+		copy(lightning);
+		toast.push('Copied!', {
+			theme: {
+				'--toastBarBackground': '#2F855A'
+			}
+		});
+	};
 </script>
 
-{#if $user?.username === username}
-	<AppHeader />
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
-		<div class="space-y-3 w-full md:w-[300px] mx-auto">
-			<div class="text-center">
-				<b>Signed in as {username}</b>
+<!-- need to update this IF statement to only show if the username matches a user in the DB -->
+{#if username}
+	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+
+	<div class="flex xl:block justify-center items-center my-20 px-3">
+		<div class="space-y-10 xl:space-y-0">
+			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+				<h1 class="text-3xl font-bold">{username}</h1>
+
+				<p class="text-secondary">Address goes here</p>
+
+				<button
+					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
+					on:click={() => (followed = !followed)}
+					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
+					{followed ? 'Remove' : 'Follow'}
+				</button>
 			</div>
 
-			<div>
-				<a href="/logout" style="cursor: pointer">
-					<button
-						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-						><Icon icon="logout" style="mr-2" /> Logout</button
-					>
-				</a>
+			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+				<div
+					id="qr"
+					class="border border-lightgrey rounded-3xl flex md:p-5 justify-center items-center relative"
+				>
+					<div
+						class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+							? 'block'
+							: 'hidden'}"
+					/>
+				</div>
+
+				<p class="text-secondary text-center font-semibold">Scan to pay with Bitcoin</p>
+
+				<div
+					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
+				>
+					<span>{lightning}</span>
+					<button on:click={handleCopy}>
+						<Icon icon="copy" style="ml-2" />
+					</button>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 736f38e8..b2cb8aae 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -30,8 +30,17 @@
 </script>
 
 {#if ready}
-	<SvelteToast />
+	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 	<slot />
 {:else}
 	<LoadingSplash />
 {/if}
+
+<style>
+	:root {
+		--toastContainerTop: auto;
+		--toastContainerRight: auto;
+		--toastContainerBottom: 8rem;
+		--toastContainerLeft: calc(50vw - 8rem);
+	}
+</style>
-- 
cgit v1.2.3