#157 show versions in tab

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>

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);
 		}

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()}
 >

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>