|
1 | 1 | <script lang="ts">
|
2 |
| -import type { ExtensionByCategoryInfo } from '$lib/api/extensions-info'; |
3 |
| -
|
| 2 | +import type { ExtensionByCategoryInfo, CatalogExtensionInfo } from '$lib/api/extensions-info'; |
4 | 3 | import ExtensionsByCategory from './ExtensionsByCategory.svelte';
|
| 4 | +import ExtensionByCategoryCard from './ExtensionByCategoryCard.svelte'; |
| 5 | +
|
| 6 | +export let extensionsByCategories: ExtensionByCategoryInfo[]; |
| 7 | +
|
| 8 | +let filteredExtensions: CatalogExtensionInfo[] = []; |
| 9 | +let showCategories = true; |
| 10 | +
|
| 11 | +// Get the query from the URL |
| 12 | +function getQueryLimit(): number | null { |
| 13 | + const query = new URLSearchParams(window.location.search).get('query'); |
| 14 | + return query ? parseInt(query, 10) : null; |
| 15 | +} |
| 16 | +
|
| 17 | +// Sort extensions based upon the last updated date based upon what's in .versions array |
| 18 | +function getSortedExtensions(extensions: CatalogExtensionInfo[]): CatalogExtensionInfo[] { |
| 19 | + return extensions.sort((a, b) => { |
| 20 | + const aLastUpdated = a.versions?.[a.versions.length - 1]?.lastUpdated ?? 0; |
| 21 | + const bLastUpdated = b.versions?.[b.versions.length - 1]?.lastUpdated ?? 0; |
| 22 | + return Number(bLastUpdated) - Number(aLastUpdated); |
| 23 | + }); |
| 24 | +} |
| 25 | +
|
| 26 | +$: { |
| 27 | + const limit = getQueryLimit(); |
| 28 | + showCategories = !limit; |
5 | 29 |
|
6 |
| -const { extensionsByCategories }: { extensionsByCategories: ExtensionByCategoryInfo[] } = $props(); |
| 30 | + if (limit) { |
| 31 | + const allExtensions = extensionsByCategories.flatMap(({ extensions }) => extensions); |
| 32 | + filteredExtensions = getSortedExtensions(allExtensions).slice(0, limit); |
| 33 | + } |
| 34 | +} |
7 | 35 | </script>
|
8 | 36 |
|
9 | 37 | <div class="flex flex-col h-full">
|
10 |
| - {#each extensionsByCategories as extensionByCategoryInfo} |
11 |
| - <ExtensionsByCategory {extensionByCategoryInfo} /> |
12 |
| - {/each} |
| 38 | + {#if showCategories} |
| 39 | + {#each extensionsByCategories as extensionByCategoryInfo} |
| 40 | + <ExtensionsByCategory {extensionByCategoryInfo} /> |
| 41 | + {/each} |
| 42 | + {:else} |
| 43 | + <div |
| 44 | + class="mt-2 grid min-[920px]:grid-cols-2 min-[1180px]:grid-cols-3 gap-3" |
| 45 | + role="region" |
| 46 | + aria-label="Queried extensions" |
| 47 | + > |
| 48 | + {#each filteredExtensions as extension} |
| 49 | + <ExtensionByCategoryCard {extension} /> |
| 50 | + {/each} |
| 51 | + </div> |
| 52 | + {/if} |
13 | 53 | </div>
|
0 commit comments