From 6c490fd16ca74f796256048d30931ded92c01fb5 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 8 Feb 2023 20:06:00 +0800
Subject: [PATCH] #13 package page metas

---
 .../ui/src/PackageMetas/PackageMetas.svelte   | 48 ++++++++++++++++---
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/modules/ui/src/PackageMetas/PackageMetas.svelte b/modules/ui/src/PackageMetas/PackageMetas.svelte
index 131ab84..13019bb 100644
--- a/modules/ui/src/PackageMetas/PackageMetas.svelte
+++ b/modules/ui/src/PackageMetas/PackageMetas.svelte
@@ -1,41 +1,75 @@
+<script lang="ts">
+	const data = {
+		last_modified: new Date(), // convert this to time ago
+		license: 'MIT',
+		byte_size: 22700000,
+		homepage_url: 'homepage.org',
+		documentation_url: 'https://docs.org',
+		repo_url: 'https://github.orm/owner/repo',
+		contributors: [
+			{
+				login: 'optimus_prime',
+				avatar_url: '',
+				owner: true
+			},
+			{
+				login: 'batman_suparman',
+				avatar_url: '',
+				owner: false
+			}
+		],
+		categories: [
+			{
+				name: 'utility'
+			},
+			{
+				name: 'design'
+			},
+			{
+				name: 'gaming'
+			}
+		]
+	};
+</script>
+
 <section class="bg-black">
 	<h1 class="border border-gray p-4 text-primary">METADATA</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">4 months ago</span>
+			<span class="ml-4">{data.last_modified}</span>
 		</li>
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">MIT or Apache-2.0</span>
+			<span class="ml-4">{data.license}</span>
 		</li>
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">22.7 kB</span>
+			<span class="ml-4">{data.byte_size}</span>
 		</li>
 	</ul>
 	<h1 class="border border-t-0 border-gray p-4 text-primary">HOMEPAGE</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">https://homepage.org</span>
+			<span class="ml-4">{data.homepage_url}</span>
 		</li>
 	</ul>
 	<h1 class="border border-t-0 border-gray p-4 text-primary">DOCUMENTATION</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">https://docs.org</span>
+			<span class="ml-4">{data.documentation_url}</span>
 		</li>
 	</ul>
 	<h1 class="border border-t-0 border-gray p-4 text-primary">GITHUB REPOSITORY</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="border border-gray p-4">
 			<i class="icon-calendar" />
-			<span class="ml-4">https://github.orm/owner/repo</span>
+			<span class="ml-4">{data.repo_url}</span>
 		</li>
 	</ul>
-	<h1 class="border border-t-0 border-gray p-4 text-primary">OWNERS</h1>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">CONTRIBUTORS</h1>
 	<ul class="border border-t-0 border-gray p-4">
 		<li class="flex items-center border border-gray p-4">
 			<figure class="h-5 w-5 bg-gray" />