Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<script lang="ts"> import { resolve } from "$app/paths"; import Star from "$icon/star"; import TrendingUp from "$icon/trending-up"; import { formatCount } from "$lib/format"; import { repoKey, type RepoCardData } from "$lib/components/profile/types"; import PreviewCard from "./PreviewCard.svelte";
let { repos }: { repos: RepoCardData[] } = $props();</script>
<PreviewCard title="Trending" icon={TrendingUp}> {#if repos.length > 0} <div class="rounded-b bg-background-default py-1"> {#each repos as repo (repoKey(repo))} <!-- a real anchor per row: a stretched (absolute inset-0) link inside a position:relative row breaks hit-testing on safari --> <a href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")} class="grid grid-cols-[3.5rem_minmax(0,1fr)] gap-x-4 px-4 py-3 no-underline hover:bg-background-subtle hover:no-underline" > <span class="flex items-start justify-end gap-1 typography-paragraph-small text-foreground-subtle tabular-nums" > <Star class="mt-0.5 size-3 shrink-0 fill-current" aria-hidden="true" /> {formatCount(repo.stars ?? 0)} </span> <span class="min-w-0"> <span class="block truncate font-medium text-foreground-default"> {repo.ownerHandle}/{repo.name} </span> {#if repo.description} <span class="line-clamp-1 block typography-paragraph-small text-foreground-muted" > {repo.description} </span> {/if} </span> </a> {/each} </div> {:else} <p class="rounded-b bg-background-canvas p-6 text-center typography-paragraph-small text-foreground-subtle" > No trending repositories this week </p> {/if}</PreviewCard>