feat: header component (#13)

ForkbombEu · Feb 8, 2024 · b19d104 · b19d104
1 parent 7e41e4f
commit b19d104
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 40 deletions.
diff --git a/src/lib/components/atoms/Header.svelte b/src/lib/components/atoms/Header.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { chevronBackOutline } from 'ionicons/icons';
+	export let backButton = true;
+	//TODO: fix background color with actual token
+</script>
+
+<ion-header class="bg-[#243151]">
+	<ion-toolbar>
+		{#if backButton}
+			<ion-buttons slot="start">
+				<ion-button on:click={() => window.history.back()} on:keydown={() => window.history.back()} aria-hidden>
+					<ion-icon icon={chevronBackOutline}></ion-icon>
+				</ion-button>
+			</ion-buttons>
+		{/if}
+		<ion-title class="text-center">
+			<slot />
+		</ion-title>
+		{#if backButton}
+			<ion-buttons slot="end" class="invisible">
+				<div class="px-5" />
+			</ion-buttons>
+		{/if}
+	</ion-toolbar>
+</ion-header>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,27 +1,18 @@
 <script lang="ts">
-	import Logo from '$lib/components/atoms/Logo.svelte';
+	import Header from '$lib/components/atoms/Header.svelte';
 	import { getServices } from '$lib/slangroom/services';
 
 
 </script>
-
-<ion-header>
-	<ion-toolbar>
-		<ion-title>
-			<div class="flex items-center gap-2">
-				<Logo />
-				<h1 class="text-2xl">Verifier</h1>
-			</div>
-		</ion-title>
-	</ion-toolbar>
-</ion-header>
-
+<Header backButton={false}>VERIFIER</Header>
 <ion-content fullscreen class="ion-padding space-y-10">
-	<h1 class="text-[32px] font-medium leading-[20.5px] tracking-[-0.5px] text-[#E8D2FF]">Home</h1>
 	{#await getServices()}
 		<ion-spinner />
 	{:then res}
 		{@const services = res.result.items}
+		<d-heading size="s">
+			Verify credential
+		</d-heading>
 		<div class="flex flex-col gap-2">
 			{#each services as service}
 				<d-credential-service name={service.name} issuer={service.issuer} href={`${service.id}/credential-detail`} />

diff --git a/src/routes/[id]/credential-detail/+page.svelte b/src/routes/[id]/credential-detail/+page.svelte
@@ -1,20 +1,10 @@
 <script lang="ts">
-	import Logo from '$lib/components/atoms/Logo.svelte';
-
+	import Header from '$lib/components/atoms/Header.svelte';
 	export let data: any;
 	const { credential } = data;
 </script>
 
-<ion-header>
-	<ion-toolbar>
-		<ion-title>
-			<div class="flex items-center gap-2">
-				<Logo />
-				<h1 class="text-2xl">Credential detail</h1>
-			</div>
-		</ion-title>
-	</ion-toolbar>
-</ion-header>
+<Header>CREDENTIAL DETAIL</Header>
 <ion-content fullscreen class="ion-padding">
 	<d-credential-card {...credential} expiration-date="2017-01-01" verified="false"> </d-credential-card>
 	<div class="bg-tab fixed bottom-0 left-0 w-full">

diff --git a/src/routes/[id]/verify/+page.svelte b/src/routes/[id]/verify/+page.svelte
@@ -7,8 +7,9 @@
 	import { qrcode } from '@slangroom/qrcode';
 	import { onMount } from 'svelte';
 	import { thumbsDownOutline, thumbsUpOutline } from 'ionicons/icons';
+	import Header from '$lib/components/atoms/Header.svelte';
 
-	export let data:any
+	export let data: any;
 
 	let qr: any;
 	let error: string;
@@ -71,22 +72,15 @@ Then print data
 	addListeners();
 </script>
 
-<ion-header>
-	<ion-toolbar>
-		<ion-title>
-			<div class="flex items-center gap-2">
-				<Logo />
-				<h1 class="text-2xl">Verifier</h1>
-			</div>
-		</ion-title>
-	</ion-toolbar>
-</ion-header>
-
+<Header>VERIFICATION QR</Header>
 <ion-content fullscreen class="ion-padding">
-    <ion-button href="/">back</ion-button>
+	<ion-button href="/">back</ion-button>
 	<div class="flex flex-col">
 		{#if incomingNotification}
-			<ion-icon icon={(incomingNotification.data.message === 'ok')?thumbsUpOutline : thumbsDownOutline} class="text-9xl my-6 mx-auto"></ion-icon>
+			<ion-icon
+				icon={incomingNotification.data.message === 'ok' ? thumbsUpOutline : thumbsDownOutline}
+				class="mx-auto my-6 text-9xl"
+			></ion-icon>
 		{:else if qr}
 			<img src={qr.result.qrcode} alt="qrCode" class="w-full pt-20" />
 		{/if}