Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<script lang="ts"> import { resolve } from "$app/paths"; import type { Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { formatCount } from "#lib/format.ts";
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-2xs typography-paragraph-small font-bold text-foreground-default no-underline hover:underline" > <Glyph class="size-3.5 shrink-0" aria-hidden="true" /> {formattedCount} </a>{:else} <span class="flex items-center gap-xs font-medium text-foreground-default"> <Glyph class="size-3.5 shrink-0" aria-hidden="true" /> {title} {#if count !== undefined} <span class="mt-px rounded-md bg-background-inset px-2xs typography-paragraph-small"> {formattedCount} </span> {/if} </span>{/if}