#75 list package categories in home/discover page

packages/gui/src/components/CategorizedPackages/CategorizedPackages.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import type { Category } from '$libs/types';
+	import { onMount } from 'svelte';
+	import { getCategorizedPackages } from '@api';
+
+	let categories: Category[] = [];
+
+	onMount(async () => {
+		categories = await getCategorizedPackages();
+	});
+</script>
+
+{#each categories as category}
+	<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
+	<ul class="grid grid-cols-3 border border-r-0 border-gray bg-black">
+		{#each category.packages as pkg}
+			<div class="border border-t-0 border-l-0 border-gray p-4">
+				<MiniPackageCard
+					{pkg}
+					ctaLabel="DETAILS"
+					onClickCTA={async () => {
+						console.log('do something with:', pkg.full_name);
+					}}
+				/>
+			</div>
+		{/each}
+	</ul>
+{/each}

packages/gui/src/components/InstalledPackages/InstalledPackages.svelte

@@ -21,7 +21,6 @@
 			<div class="border border-t-0 border-l-0 border-gray p-4">
 				<MiniPackageCard
 					{pkg}
-					link={`/packages/${pkg.slug}`}
 					ctaLabel="DETAILS"
 					onClickCTA={async () => {
 						console.log('do something with:', pkg.full_name);

packages/gui/src/libs/api/mock.ts

@@ -6,7 +6,7 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package, Review, AirtablePost } from '@tea/ui/types';
-import type { GUIPackage, Course } from '../types';
+import type { GUIPackage, Course, Category } from '../types';
 import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
 import _ from 'lodash';
@@ -298,3 +298,27 @@ export async function getAllPosts(type: string): Promise<AirtablePost[]> {
 
 	return posts;
 }
+
+export async function getCategorizedPackages(): Promise<Category[]> {
+	const mockPackages = packages.slice(0, 9).map((pkg) => ({
+		...pkg,
+		state: PackageStates.AVAILABLE
+	}));
+	return [
+		{
+			label: 'framework essentials',
+			cta_label: 'View all essentials >',
+			packages: mockPackages
+		},
+		{
+			label: 'star-struck heavyweights',
+			cta_label: 'View all star-strucks >',
+			packages: mockPackages
+		},
+		{
+			label: 'simply delightful',
+			cta_label: 'View all delightful packages >',
+			packages: mockPackages
+		}
+	];
+}

packages/gui/src/libs/api/tauri.ts

@@ -15,7 +15,7 @@ import { getClient } from '@tauri-apps/api/http';
 import { Command } from '@tauri-apps/api/shell';
 import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 import type { Package, Review, AirtablePost } from '@tea/ui/types';
-import type { GUIPackage, Course } from '../types';
+import type { GUIPackage, Course, Category } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
 
@@ -156,3 +156,8 @@ export async function getAllPosts(tag: string): Promise<AirtablePost[]> {
 	const posts = await get<AirtablePost[]>('posts', { tag });
 	return posts;
 }
+
+export async function getCategorizedPackages(): Promise<Category[]> {
+	const cats = await mock.getCategorizedPackages();
+	return cats;
+}

packages/gui/src/libs/types.ts

@@ -23,3 +23,9 @@ export type Course = {
 	banner_image_url: string;
 	link: string;
 };
+
+export type Category = {
+	label: string;
+	cta_label: string;
+	packages: GUIPackage[];
+};

packages/gui/src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	import TopPackages from '$components/TopPackages/TopPackages.svelte';
 	import News from '$components/News/News.svelte';
+	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
 	backLink.set('');
 </script>
 
@@ -21,6 +22,9 @@
 	<section class="mt-8">
 		<TopPackages />
 	</section>
+	<section class="mt-8">
+		<CategorizedPackages />
+	</section>
 	<section class="mt-8">
 		<News />
 	</section>