Merge pull request #5 from ForkbombEu/credential_detail_page

feat: credential detail page

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components@latest/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"

src/routes/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Logo from '$lib/components/atoms/Logo.svelte';
-	import Card from '$lib/components/molecules/Card.svelte';
-	import fakeCredentials from '$lib/fakeCredentials';
 	import { getServices } from '$lib/slangroom/services';
 
 
@@ -26,7 +24,7 @@
 		{@const services = res.result.items}
 		<div class="flex flex-col gap-2">
 			{#each services as service}
-				<d-credential-service name={service.name} issuer={service.issuer} href={`/verify/${service.id}`} />
+				<d-credential-service name={service.name} issuer={service.issuer} href={`${service.id}/credential-detail`} />
 			{/each}
 		</div>
 	{/await}

src/routes/[id]/credential-detail/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Logo from '$lib/components/atoms/Logo.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>
+<ion-content fullscreen class="ion-padding">
+	<d-credential-card {...credential} expiration-date="2017-01-01" verified="false"> </d-credential-card>
+	<div class="fixed w-full bottom-0 left-0 bg-tab pb-11">
+		<d-credential-detail {...credential} description={credential.expand.templates[0].name} href={`/${credential.id}/verify/`} />
+	</div>
+</ion-content>