Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<script lang="ts"> import { resolve } from "$app/paths"; import type { Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { formatCount } from "$lib/format";
interface Props { title: string; href: string; icon: Component<SvelteHTMLElements["svg"]>; count?: number; approximate?: boolean; compact?: boolean; }
let { title, href, icon, count, approximate = false, compact = false }: Props = $props(); const Glyph = $derived(icon); const formattedCount = $derived( count === undefined ? undefined : approximate && count > 0 ? `${formatCount(count)}+` : formatCount(count) );</script>
{#if compact} <a href={resolve(href as "/")} aria-label={title} class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline" > <Glyph class="size-4 shrink-0" aria-hidden="true" /> {formattedCount} </a>{:else} <a href={resolve(href as "/")} class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline" > <Glyph class="size-4 shrink-0" aria-hidden="true" /> {title} {#if count !== undefined} <span class="mt-px rounded-sm bg-background-inset px-1 typography-paragraph-small"> {formattedCount} </span> {/if} </a>{/if}