Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<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"; let { repo, starButton = true, showOwner = true, onStar }: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean; onStar?: (change: StarChange) => void; } = $props();
const stats = $derived( [ { value: repo.stars, 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-1"> <div class="flex items-start justify-between font-medium text-foreground-default"> <div class="mt-1 mr-2 flex min-w-0 flex-1 items-center"> <BookMarked class="mr-1.5 size-4 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-4 shrink-0"> <StarButton subject={{ kind: "repo", did: repo.repoDid, ownerHandle: repo.ownerHandle, name: repo.name }} initialCount={repo.stars} initialRkey={repo.viewerStarRkey} insetShadow={false} 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-4 pt-2 typography-monospace-small text-foreground-muted" > {#if repo.language} <span class="flex items-center gap-2"> <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-1"> <stat.Icon class="size-3.5 shrink-0" aria-hidden="true" /> <span>{formatCount(stat.value)}</span> </span> {/each} </div> {/if}</div>