From 687345b28a5ae27ed1423e1d0b3f9884103ca7f7 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 18 Jan 2023 15:45:37 +0800
Subject: [PATCH] #157 show versions in tab

---
 .../PackageDetail/PackageDetail.svelte        |  8 ++++
 .../src/routes/packages/[slug]/+page.svelte   | 43 +++++++++++--------
 modules/ui/src/Button/Button.svelte           |  2 +-
 modules/ui/src/Tabs/Tabs.svelte               |  8 +++-
 4 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 modules/gui/src/components/PackageDetail/PackageDetail.svelte

diff --git a/modules/gui/src/components/PackageDetail/PackageDetail.svelte b/modules/gui/src/components/PackageDetail/PackageDetail.svelte
new file mode 100644
index 0000000..8b16f0f
--- /dev/null
+++ b/modules/gui/src/components/PackageDetail/PackageDetail.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { Package } from '@tea/ui/types';
+	export let pkg: Package;
+</script>
+
+<section class="h-64 w-full">
+	<h1>{pkg.full_name}</h1>
+</section>
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index 4ef2ea7..a29b88b 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -12,6 +12,7 @@
 	import Badges from '$components/Badges/Badges.svelte';
 	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { getPackageBottles } from '@api';
+	import PackageDetail from '$components/PackageDetail/PackageDetail.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -23,11 +24,20 @@
 	let pkg: Package;
 
 	let reviews: Review[];
+	let bottles: Bottle[] = [];
+	let versions: string[] = [];
+
+	let tabs: Tab[] = [];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
 		if (!pkg && foundPackage) {
 			pkg = foundPackage;
+			tabs.push({
+				label: 'details',
+				component: PackageDetail,
+				props: { pkg }
+			});
 		}
 
 		if (!reviews && pkg) {
@@ -40,28 +50,25 @@
 	packagesStore.subscribe(setPkg);
 	featuredPackages.subscribe(setPkg);
 
-	let bottles: Bottle[] = [];
-	const tabs: Tab[] = [
-		{
-			label: 'details',
-			component: Badges,
-			props: {
-				arg1: 'A1'
-			}
-		},
-		{
-			label: 'versions',
-			component: Bottles,
-			props: {
-				bottles
-			}
-		}
-	];
-
 	onMount(async () => {
 		try {
 			const newBottles = await getPackageBottles(pkg.full_name);
+			const newVersion = newBottles.map((b) => b.version);
+			versions = [...new Set(newVersion)];
+
 			bottles.push(...newBottles);
+			console.log('sync tabs:', versions);
+			tabs = [
+				...tabs,
+				{
+					label: `versions (${versions.length || 0})`,
+					component: Bottles,
+					props: {
+						bottles
+					}
+				}
+			];
+			console.log(tabs);
 		} catch (err) {
 			console.error(err);
 		}
diff --git a/modules/ui/src/Button/Button.svelte b/modules/ui/src/Button/Button.svelte
index 3376f82..b80487e 100644
--- a/modules/ui/src/Button/Button.svelte
+++ b/modules/ui/src/Button/Button.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <button
-	type="button font-sans"
+	type="button"
 	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
 	on:click={() => onClick && onClick()}
 >
diff --git a/modules/ui/src/Tabs/Tabs.svelte b/modules/ui/src/Tabs/Tabs.svelte
index 56f4bb5..fe5a502 100644
--- a/modules/ui/src/Tabs/Tabs.svelte
+++ b/modules/ui/src/Tabs/Tabs.svelte
@@ -13,13 +13,17 @@
 			active = tabs[0].label;
 		}
 	});
+
+	console.log('t', tabs);
 </script>
 
 <section class="relative h-auto border border-gray">
 	<menu class="flex border border-gray">
 		{#each tabs as tab}
-			<div class="border border-y-0 border-l-0 border-gray">
-				<Button onClick={() => (active = tab.label)}>{tab.label}</Button>
+			<div class="border border-y-0 border-l-0 border-gray text-white">
+				<Button onClick={() => (active = tab.label)}>
+					<span class={tab.label === active ? 'text-white' : ''}>{tab.label}</span>
+				</Button>
 			</div>
 		{/each}
 	</menu>