feat: create root page + layout

Author: JulienAuvo

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -55,7 +55,7 @@ $effect(() => {
                     <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
                     </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
             {:else if variant === 'eVault'}
@@ -64,9 +64,9 @@ $effect(() => {
         </div>
         <div>
             {#if variant === "eName"}        
-                <p class="text-gray font-light">Your eName</p>
+                <p class="text-gray font-normal">Your eName</p>
                 <div class="flex items-center justify-between w-full">
-                    <p class="text-white w-[60%] font-medium">@{userId}</p>
+                    <p class="text-white w-full font-medium">@{userId}</p>
                 </div>
             {:else if variant === "ePassport"}
                 <div class="flex gap-2 flex-col">

infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
-		pane.present({ animate: true });
-	} else {
-		pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
-		handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
     })}
     onswipe={() => handleSwipe?.(isPaneOpen)}
     bind:this={drawerElem}
-    use:clickOutside
+    use:clickOutside={handleClickOutside}
     class={cn(restProps.class)}
 >
     <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			node.dispatchEvent(new CustomEvent("click_outside", node));
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(); // Call the provided callback
+			node.dispatchEvent(new CustomEvent("click_outside"));
 		}
 	};
 

infrastructure/eid-wallet/src/routes/(app)/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+</script>
+
+<div class="p-6 mb-16">
+    {@render children()}
+</div>

infrastructure/eid-wallet/src/routes/(app)/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+    
+<Hero
+    title="Good morning!"
+    subtitle="Don't forget to drink water."
+    showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+    <section class="mt-8">
+    <h4 class="mb-2">{title}</h4>
+        {@render children()}
+    </section>
+{/snippet}
+
+{#snippet eName()}
+    <IdentityCard
+    variant="eName"
+    userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+    viewBtn={() => alert("View button clicked!")}
+    shareBtn={() => shareQRdrawerOpen = true}
+    />
+{/snippet}
+{#snippet ePassport()}
+    <IdentityCard
+    variant="ePassport"
+    viewBtn={() => alert("View button clicked!")}
+    userData={dummyData}
+    />
+{/snippet}
+{#snippet eVault()}
+    <IdentityCard
+    variant="eVault"
+    usedStorage={15}
+    totalStorage={100}
+    />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<Drawer
+    title="Scan QR Code"
+    bind:isPaneOpen={shareQRdrawerOpen}
+    isCancelRequired={true}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div class="flex justify-center relative items-center overflow-hidden h-full bg-gray rounded-3xl p-8">
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+        <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+    </div>
+
+    <h4 class="text-center">Share your eName</h4>
+    <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+    <div class="flex justify-center items-center mt-4">
+        <Button.Action
+            variant="solid"
+            callback={shareQR}
+            class="w-full"
+        >
+            Share
+        </Button.Action>
+    </div>
+</Drawer>
+
+<Button.Action
+    variant="solid"
+    onclick={() => alert("Action button clicked!")}
+    class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+    <HugeiconsIcon
+        size={32}
+        strokeWidth={2}
+        className="mr-2"
+        icon={QrCodeIcon}
+    />
+    Scan to Login
+</Button.Action>