-
Notifications
You must be signed in to change notification settings - Fork 5
/
AddOns.svelte
36 lines (32 loc) · 1.23 KB
/
AddOns.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script lang="ts">
import type { Page } from "@/api/types/common";
import type { AddOnListItem } from "@/addons/types";
import { Book16, Hourglass24, Pin24, Plug16 } from "svelte-octicons";
import Action from "$lib/components/common/Action.svelte";
import Empty from "$lib/components/common/Empty.svelte";
import Flex from "$lib/components/common/Flex.svelte";
import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
import Pin from "@/common/Pin.svelte";
export let pinnedAddOns: Promise<Page<AddOnListItem>>;
</script>
<SidebarGroup>
<SidebarItem slot="title"><Plug16 /> Add-Ons</SidebarItem>
<a href="/app/add-ons/" slot="action">
<Action icon={Book16}>Explore</Action>
</a>
<Flex direction="column" gap={0}>
{#await pinnedAddOns}
<Empty icon={Hourglass24}>Loading…</Empty>
{:then addons}
{#each addons.results as addon}
<SidebarItem small href={`/app/add-ons/${addon.repository}/`}>
<Pin active={addon.active} />
{addon.name}
</SidebarItem>
{:else}
<Empty icon={Pin24}>Pinned add-ons will appear here</Empty>
{/each}
{/await}
</Flex>
</SidebarGroup>