feat: add shareQR eName drawer

Author: JulienAuvo

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

@@ -1,16 +1,24 @@
 <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",
+	"Date of birth": "01 - 01 - 1990",
 	"ID submitted": "American Passport",
-	"Passport number": "123456789",
+	"Passport number": "1234567-US",
 };
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
 </script>
 
 
@@ -30,9 +38,9 @@ const dummyData = {
 {#snippet eName()}
     <IdentityCard
     variant="eName"
-    userId="1234567890"
+    userId="caa0f630-2413-5aceaa2c-4628ce93e497"
     viewBtn={() => alert("View button clicked!")}
-    shareBtn={() => alert("Share button clicked!")}
+    shareBtn={() => shareQRdrawerOpen = true}
     />
 {/snippet}
 {#snippet ePassport()}
@@ -54,6 +62,31 @@ const dummyData = {
 {@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!")}