alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import User from "$lib/components/ui/User.svelte";
4 import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
5 import IssueStatePill from "./IssueStatePill.svelte";
6 import type { IssueSummary } from "$lib/components/repo/types";
7 import Separator from "$lib/components/ui/Separator.svelte";
8
9 interface Props {
10 ownerHandle: string;
11 repoName: string;
12 issue: IssueSummary;
13 }
14
15 let { ownerHandle, repoName, issue }: Props = $props();
16
17 const href = $derived(
18 resolve(`/${ownerHandle}/${repoName}/issues/${encodeURIComponent(issue.uri)}` as "/")
19 );
20</script>
21
22<div class="pb-2">
23 <a {href} class="text-foreground-default hover:underline">
24 <span>{issue.title}</span>
25 <span class="text-foreground-muted">#{issue.rkey}</span>
26 </a>
27</div>
28
29<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-foreground-muted">
30 <IssueStatePill state={issue.state} />
31
32 <span class="ml-1 flex items-center gap-1">
33 <User handle={issue.authorHandle} did={issue.authorDid} />
34 </span>
35
36 <Separator variant="dot" />
37
38 <TimeAgo value={issue.createdAt} />
39
40 <Separator variant="dot" />
41
42 <a {href} class="text-foreground-muted no-underline hover:underline">
43 {issue.commentCount}
44 {issue.commentCount === 1 ? "comment" : "comments"}
45 </a>
46</div>