Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at sl/gitmirror
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102<script lang="ts"> import { resolve } from "$app/paths"; import BookMarked from "$icon/book-marked"; import Star from "$icon/star"; import GitFork from "$icon/git-fork"; import CircleDot from "$icon/circle-dot"; import GitPullRequest from "$icon/git-pull-request"; import ColorBall from "$lib/components/ui/ColorBall.svelte"; import StarButton from "$lib/components/repo/StarButton.svelte"; import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors"; import type { RepoCardData, StarChange } from "$lib/components/profile/types"; import { formatCount } from "$lib/format"; import { createOptimisticCount } from "$lib/optimistic.svelte"; let { repo, starButton = true, showOwner = true, onStar }: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean; onStar?: (change: StarChange) => void; } = $props();
const starCount = createOptimisticCount({ key: () => repo.repoDid, loaded: () => repo.stars });
const stats = $derived( [ { value: repo.stars === undefined ? undefined : starCount.value, Icon: Star }, { value: repo.forks, Icon: GitFork }, { value: repo.issues, Icon: CircleDot }, { value: repo.pulls, Icon: GitPullRequest } ].filter((s) => s.value !== undefined) );</script>
<div class="flex min-h-24 flex-col gap-2xs"> <div class="flex items-start justify-between font-medium text-foreground-default"> <div class="mt-2xs mr-xs flex min-w-0 flex-1 items-center"> <BookMarked class="mr-1.5 size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" /> <a href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")} class="min-w-0 truncate text-foreground-default no-underline hover:underline" > {showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name} </a> </div> {#if starButton} <div class="ml-md shrink-0"> <StarButton subject={{ kind: "repo", did: repo.repoDid, ownerHandle: repo.ownerHandle, name: repo.name }} initialCount={repo.stars} initialRkey={repo.viewerStarRkey} hideCount={true} onAdjust={(delta) => starCount.adjust(delta)} onCommit={onStar} /> </div> {/if} </div>
{#if repo.description} <p class="line-clamp-2 typography-paragraph-small text-foreground-muted"> {repo.description} </p> {/if}
{#if repo.language !== undefined || stats.length > 0} <div class="mt-auto flex flex-wrap items-center gap-md pt-xs typography-monospace-small text-foreground-muted" > {#if repo.language} <span class="flex items-center gap-xs"> <ColorBall color={LANGUAGE_COLORS[repo.language] ?? LANGUAGE_COLOR_FALLBACK} class="size-2.5" /> <span>{repo.language}</span> </span> {/if} {#each stats as stat (stat.Icon)} <span class="flex items-center gap-2xs"> <stat.Icon class="size-3.5 shrink-0" aria-hidden="true" /> <span>{formatCount(stat.value)}</span> </span> {/each} </div> {/if}</div>