Skip to content

Commit 9d161c2

Browse files
committed
init
1 parent e0d26c6 commit 9d161c2

File tree

1 file changed

+46
-6
lines changed

1 file changed

+46
-6
lines changed

src/lib/ui/ExtensionsList.svelte

+46-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,53 @@
11
<script lang="ts">
2-
import type { ExtensionByCategoryInfo } from '$lib/api/extensions-info';
3-
2+
import type { ExtensionByCategoryInfo, CatalogExtensionInfo } from '$lib/api/extensions-info';
43
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;
529
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+
}
735
</script>
836

937
<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}
1353
</div>

0 commit comments

Comments
 (0)