Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116<script lang="ts"> import ChevronRight from "$icon/chevron-right"; import CircleDot from "$icon/circle-dot"; import Diamond from "$icon/diamond"; import GitFork from "$icon/git-fork"; import Lock from "$icon/lock"; import Star from "$icon/star"; import type { Snippet } from "svelte"; import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors"; import Checkbox from "$lib/components/ui/Checkbox.svelte"; import Tag from "$lib/components/ui/Tag.svelte"; import type { GitHubRepo } from "$lib/github"; import { formatCount, relativeTime } from "$lib/format";
interface Props { repo: GitHubRepo; selected: boolean; expanded: boolean; knotLabel?: string; disabled?: boolean; onToggle: () => void; onExpand: () => void; body?: Snippet; language?: string; stars?: number; issues?: number; forks?: number; updatedAt?: string; }
let { repo, selected, expanded, knotLabel, disabled = false, onToggle, onExpand, body, language, stars, issues, forks, updatedAt }: Props = $props();
const languageColor = $derived( language ? (LANGUAGE_COLORS[language] ?? LANGUAGE_COLOR_FALLBACK) : null );</script>
<div class="border-b border-border-default last:border-b-0"> <div class="flex items-center gap-3 px-3 py-2.5 typography-paragraph-small"> <Checkbox checked={selected} onchange={onToggle} {disabled} aria-label={`Select ${repo.fullName}`} /> <button type="button" class="flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left" onclick={onExpand} aria-expanded={expanded} > <span class="min-w-0 flex-1 truncate">{repo.fullName}</span> {#if repo.private} <Tag size="small" icon={Lock}>Private</Tag> {/if} {#if language} <span class="flex shrink-0 items-center gap-1.5 text-foreground-muted"> <span aria-hidden="true" class="size-2 shrink-0 rounded-full" style="background: {languageColor}" ></span> <span class="truncate">{language}</span> </span> {/if} {#if stars !== undefined} <span class="hidden shrink-0 items-center gap-1 text-foreground-muted sm:flex"> <Star class="size-3.5" aria-hidden="true" /> {formatCount(stars)} </span> {/if} {#if issues !== undefined} <span class="hidden shrink-0 items-center gap-1 text-foreground-muted sm:flex"> <CircleDot class="size-3.5" aria-hidden="true" /> {formatCount(issues)} </span> {/if} {#if forks !== undefined} <span class="hidden shrink-0 items-center gap-1 text-foreground-muted sm:flex"> <GitFork class="size-3.5" aria-hidden="true" /> {formatCount(forks)} </span> {/if} <span class="ml-auto flex shrink-0 items-center gap-3 text-foreground-muted"> {#if knotLabel} <span class="flex items-center gap-1"> <Diamond class="size-3.5" aria-hidden="true" /> {knotLabel} </span> {/if} {#if updatedAt} <span class="hidden sm:inline">Updated {relativeTime(updatedAt)}</span> {/if} <ChevronRight class="size-4 shrink-0 transition-transform {expanded ? 'rotate-90' : ''}" aria-hidden="true" /> </span> </button> </div> {#if expanded && body} <div class="border-t border-border-default bg-background-subtle px-3 py-3"> {@render body()} </div> {/if}</div>