diff --git a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte index c662ae7..4febfe4 100644 --- a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte +++ b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte @@ -1,7 +1,26 @@ - -

test

+ ({ + title: course.title, + subTitle: course.sub_title, + imageUrl: course.banner_image_url, + link: course.link + }))} +/> diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte index 31f75e5..83ac856 100644 --- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte +++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte @@ -1,10 +1,9 @@ -
- -
-

FEATURED PACKAGES

-
    - {#each featuredPackages as pkg, i} -
-
-
- {#if featuredPackages.length} -
- {#each featuredPackages as pkg} -
- - - -
- {/each} -
- {:else} - - {/if} -
-
+ ({ + title: pkg.full_name, + subTitle: pkg.maintainer || '', + imageUrl: pkg.thumb_image_url, + link: `/packages/${pkg.slug}` + }))} +/> diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts index aaf6d9d..9e1abf2 100644 --- a/packages/gui/src/libs/api/mock.ts +++ b/packages/gui/src/libs/api/mock.ts @@ -6,7 +6,7 @@ * * make cors work with api.tea.xyz/v1 */ import type { Package, Review } from '@tea/ui/types'; -import type { GUIPackage } from '../types'; +import type { GUIPackage, Course } from '../types'; import { PackageStates } from '../types'; import { loremIpsum } from 'lorem-ipsum'; import _ from 'lodash'; @@ -216,3 +216,28 @@ export async function installPackage(full_name: string) { function delay(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } + +export async function getFeaturedCourses(): Promise { + const mockCourses: Course[] = [ + { + title: 'Developing With Tea', + sub_title: 'by Mxcl', + link: '#', + banner_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg' + }, + { + title: 'Brewing Tea', + sub_title: 'by Mxcl', + link: '#', + banner_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg' + }, + { + title: 'Harvesting Tea', + sub_title: 'by Mxcl', + link: '#', + banner_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg' + } + ]; + + return mockCourses; +} diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts index eb3be09..27763f2 100644 --- a/packages/gui/src/libs/api/tauri.ts +++ b/packages/gui/src/libs/api/tauri.ts @@ -16,7 +16,7 @@ import { Command } from '@tauri-apps/api/shell'; import { readDir, BaseDirectory } from '@tauri-apps/api/fs'; import { Buffer } from 'buffer'; import type { Package, Review } from '@tea/ui/types'; -import type { GUIPackage } from '../types'; +import type { GUIPackage, Course } from '../types'; import * as mock from './mock'; import { PackageStates } from '../types'; @@ -137,3 +137,8 @@ async function getInstalledPackages() { }); return packages; } + +export async function getFeaturedCourses(): Promise { + const courses = await mock.getFeaturedCourses(); + return courses; +} diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts index 9924df9..e7bde39 100644 --- a/packages/gui/src/libs/types.ts +++ b/packages/gui/src/libs/types.ts @@ -16,3 +16,10 @@ export type GUIPackage = Package & { state: PackageStates; installed_version?: string; }; + +export type Course = { + title: string; + sub_title: string; + banner_image_url: string; + link: string; +}; diff --git a/packages/ui/package.json b/packages/ui/package.json index edca0fd..d2e8c39 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -52,6 +52,7 @@ }, "type": "module", "dependencies": { - "@tailwindcss/line-clamp": "^0.4.2" + "@tailwindcss/line-clamp": "^0.4.2", + "svelte-watch-resize": "^1.0.3" } } diff --git a/packages/ui/src/Gallery/Gallery.svelte b/packages/ui/src/Gallery/Gallery.svelte new file mode 100644 index 0000000..bc7f0f1 --- /dev/null +++ b/packages/ui/src/Gallery/Gallery.svelte @@ -0,0 +1,90 @@ + + +
+ +
+

{title}

+
    + {#each items as _item, i} +
+
+
+ {#if items.length} +
+ {#each items as item} +
+ + + +
+ {/each} +
+ {:else} + + {/if} +
+
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte b/packages/ui/src/Gallery/GalleryItem.svelte similarity index 62% rename from packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte rename to packages/ui/src/Gallery/GalleryItem.svelte index 7f9c3ff..e106d32 100644 --- a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte +++ b/packages/ui/src/Gallery/GalleryItem.svelte @@ -1,33 +1,35 @@ -
+
-

{pkg.name}

- {#if pkg.maintainer} -

• {pkg.maintainer}

+

{title}

+ {#if subTitle} +

• {subTitle}

{/if}