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 class="flex min-h-24 flex-col gap-1">
27 <div class="flex items-start justify-between font-medium text-foreground-default">
28 <div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
29 <BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
30 <a
31 href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
32 class="min-w-0 truncate text-foreground-default no-underline hover:underline"
33 >
34 {showOwner ? `${repo.ownerHandle}/${repo.name}` : repo.name}
35 </a>
36 </div>
37 {#if starButton}
38 <div class="ml-4 shrink-0">
39 <StarButton
40 repoDid={repo.repoDid}
41 repoOwnerHandle={repo.ownerHandle}
42 repoName={repo.name}
43 initialCount={repo.stars}
44 initialRkey={repo.viewerStarRkey}
45 insetShadow={false}
46 />
47 </div>
48 {/if}
49 </div>
50
51 {#if repo.description}
52 <p class="line-clamp-2 text-sm text-foreground-muted">{repo.description}</p>
53 {/if}
54
55 {#if repo.language !== undefined || stats.length > 0}
56 <div
57 class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono typography-monospace-small text-foreground-subtle"
58 >
59 {#if repo.language}
60 <span class="flex items-center gap-2">
61 <span
62 class="inline-block size-2.5 shrink-0 rounded-full"
63 style="background-color: var(--color-background-success-emphasis);"
64 ></span>
65 <span>{repo.language}</span>
66 </span>
67 {/if}
68 {#each stats as stat (stat.Icon)}
69 <span class="flex items-center gap-1">
70 <stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
71 <span>{stat.value}</span>
72 </span>
73 {/each}
74 </div>
75 {/if}
76</div>