Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<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 StarButton from "./StarButton.svelte"; import type { RepoCardData } from "$lib/components/profile/types"; let { repo, starButton = true, showOwner = true }: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $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-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"> <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 repoDid={repo.repoDid} repoOwnerHandle={repo.ownerHandle} repoName={repo.name} initialCount={repo.stars} initialRkey={repo.viewerStarRkey} /> </div> {/if} </div>
{#if repo.description} <p class="line-clamp-2 text-sm 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 font-mono text-xs text-foreground-subtle" > {#if repo.language} <span class="flex items-center gap-2"> <span class="inline-block size-2.5 shrink-0 rounded-full" style="background-color: var(--color-background-success-emphasis);" ></span> <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>{stat.value}</span> </span> {/each} </div> {/if}</div>