chadtmiller.com/knotless

<script lang="ts">
	import type { Listed } from '#lib/api/Listed.ts';
	import { date, repoHref } from '#lib/format.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import type { Snippet } from 'svelte';
	/**
	 * Repositories, each with what it is and when it was made: by name
	 * alone on an owner's page, else with whose it is.
	 */
	let { repos, owned = false, empty }: { repos: Listed[]; owned?: boolean; empty: Snippet } = $props();
</script>

<div class="box">
	<ul class="list">
		{#each repos as r (r.owner + '/' + r.name)}
			{#if owned}
				<li>
					<div class="grow">
						<a class="title" href={repoHref(r.owner, r.name)}>{r.name}</a>{#if r.private} <span class="tag">private</span>{/if}
						<div class="meta">{r.description ?? 'No description'}</div>
						{#if r.forkOf}<div class="meta"><Icon name="fork" />Forked from <a href={r.forkOf.href}>{r.forkOf.shown}</a></div>{/if}
					</div>
					<span class="mute hide-sm">{date(r.createdAt)}</span>
				</li>
			{:else}
				<li>
					<Avatar name={r.owner} size="lg" src={r.avatar} />
					<div class="grow">
						<a class="clip" href={repoHref(r.owner, r.name)}><span class="mute">{r.owner}/</span><b>{r.name}</b></a>
						<div class="meta clip">{r.description ?? 'No description'}</div>
					</div>
					<span class="mute hide-sm">{date(r.createdAt)}</span>
				</li>
			{/if}
		{:else}
			<li class="empty">{@render empty()}</li>
		{/each}
	</ul>
</div>