alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from '$app/paths';
3 import BookMarked from '$icon/book-marked';
4 import Star from '$icon/star';
5 import GitFork from '$icon/git-fork';
6 import CircleDot from '$icon/circle-dot';
7 import GitPullRequest from '$icon/git-pull-request';
8 import StarButton from './StarButton.svelte';
9 import type { RepoCardData } from '$lib/components/profile/types';
10 let {
11 repo,
12 starButton = true,
13 showOwner = true
14 }: { repo: RepoCardData; starButton?: boolean; showOwner?: boolean } = $props();
15
16 const stats = $derived(
17 [
18 { value: repo.stars, Icon: Star },
19 { value: repo.forks, Icon: GitFork },
20 { value: repo.issues, Icon: CircleDot },
21 { value: repo.pulls, Icon: GitPullRequest }
22 ].filter((s) => s.value !== undefined)
23 );
24</script>
25
26<div
27 class="flex min-h-32 flex-col gap-1 rounded border border-border bg-surface px-6 py-4 shadow-sm"
28>
29 <div class="flex items-start justify-between font-medium text-fg-strong">
30 <div class="mr-2 flex min-w-0 flex-1 items-center mt-1">
31 <BookMarked class="mr-1.5 size-4 shrink-0 text-fg-subtle" aria-hidden="true" />
32 <a
33 href={resolve(`/${repo.ownerHandle}/${repo.name}` as '/')}
34 class="min-w-0 truncate text-fg-strong no-underline hover:underline"
35 >
36 {showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name}
37 </a>
38 </div>
39 {#if starButton}
40 <div class="ml-4 shrink-0">
41 <StarButton
42 repoDid={repo.repoDid}
43 repoOwnerHandle={repo.ownerHandle}
44 repoName={repo.name}
45 initialCount={repo.stars}
46 initialRkey={repo.viewerStarRkey}
47 />
48 </div>
49 {/if}
50 </div>
51
52 {#if repo.description}
53 <p class="line-clamp-2 text-sm text-fg-muted">{repo.description}</p>
54 {/if}
55
56 {#if repo.language !== undefined || stats.length > 0}
57 <div class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-fg-subtle">
58 {#if repo.language}
59 <span class="flex items-center gap-2">
60 <span
61 class="inline-block size-2.5 shrink-0 rounded-full"
62 style="background-color: var(--color-primary);"
63 ></span>
64 <span>{repo.language}</span>
65 </span>
66 {/if}
67 {#each stats as stat (stat.Icon)}
68 <span class="flex items-center gap-1">
69 <stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
70 <span>{stat.value}</span>
71 </span>
72 {/each}
73 </div>
74 {/if}
75</div>