#138 SuggestedPackages component

modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import '$appcss';
+	import type { GUIPackage } from '$libs/types';
+	import type { Package } from '@tea/ui/types';
+	import { PackageStates } from '$libs/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
+	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
+	import { onMount } from 'svelte';
+	import { installPackage } from '@api';
+	import { packagesStore } from '$libs/stores';
+
+	export let pkg: Package;
+
+	let packages: GUIPackage[] = [];
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
+
+	onMount(async () => {
+		if (!packages.length) {
+			const matches = await packagesStore.search(pkg.desc, 4);
+			packages = matches.filter((mp) => mp.full_name !== pkg.full_name).slice(0, 3);
+		}
+	});
+</script>
+
+<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
+	<span>MORE LIKE THIS</span>
+</header>
+<ul class="grid grid-cols-3 bg-black">
+	{#if packages.length > 0}
+		{#each packages as pkg}
+			<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+				<PackageCard
+					{pkg}
+					link={`/packages/${pkg.slug}`}
+					ctaLabel={getCTALabel(pkg.state)}
+					onClickCTA={async () => {
+						try {
+							pkg.state = PackageStates.INSTALLING;
+							await installPackage(pkg.full_name);
+							pkg.state = PackageStates.INSTALLED;
+						} catch (error) {
+							console.error(error);
+						}
+					}}
+				/>
+			</div>
+		{/each}
+	{:else}
+		{#each Array(9) as _}
+			<section class="h-50 border border-gray p-4">
+				<Preloader />
+			</section>
+		{/each}
+	{/if}
+</ul>

modules/gui/src/routes/packages/[slug]/+page.svelte

@@ -5,7 +5,7 @@
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
 	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	import type { Review } from '@tea/ui/types';
-
+	import SuggestedPackages from '$components/SuggestedPackages/SuggestedPackages.svelte';
 	navStore.set('/packages');
 
 	/** @type {import('./$types').PageData} */
@@ -44,4 +44,9 @@
 	<section class="mt-8">
 		<PackageReviews reviews={reviews || []} />
 	</section>
+	{#if pkg}
+		<section class="mt-8">
+			<SuggestedPackages {pkg} />
+		</section>
+	{/if}
 </div>