ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#138 SuggestedPackages component

Browse source
This commit is contained in:
neil 2023-01-11 14:39:22 +08:00
parent 4736e566f8
commit 3e92ade7c0
2 changed files with 69 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
modules/gui/src/components/SuggestedPackages/SuggestedPackages.svelte Normal file
View file

@ -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>

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

@ -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>