alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import type { Component } from "svelte";
4 import type { SvelteHTMLElements } from "svelte/elements";
5
6 interface Props {
7 title: string;
8 href: string;
9 icon: Component<SvelteHTMLElements["svg"]>;
10 count?: number;
11 approximate?: boolean;
12 }
13
14 let { title, href, icon, count, approximate = false }: Props = $props();
15 const Glyph = $derived(icon);
16</script>
17
18<a
19 href={resolve(href as "/")}
20 class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
21>
22 <Glyph class="size-4 shrink-0" aria-hidden="true" />
23 {title}
24 {#if count !== undefined}
25 <span class="rounded bg-background-inset px-1 text-sm font-normal">
26 {approximate && count > 0 ? `${count}+` : count}
27 </span>
28 {/if}
29</a>