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
8 interface Props {
9 ownerHandle: string;
10 repoName: string;
11 issue: IssueSummary;
12 }
13
14 let { ownerHandle, repoName, issue }: Props = $props();
15
16 const href = $derived(
17 resolve(`/${ownerHandle}/${repoName}/issues/${encodeURIComponent(issue.uri)}` as "/")
18 );
19</script>
20
21<div class="pb-2">
22 <a {href} class="text-foreground-default no-underline">
23 <span class="hover:underline">{issue.title}</span>
24 <span class="text-foreground-muted">#{issue.rkey}</span>
25 </a>
26</div>
27
28<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-muted">
29 <IssueStatePill state={issue.state} />
30
31 <span class="ml-1 flex items-center gap-1">
32 <User handle={issue.authorHandle} did={issue.authorDid} />
33 </span>
34
35 <span class="before:mr-1 before:content-['·']">
36 <TimeAgo value={issue.createdAt} />
37 </span>
38
39 <span class="before:mr-1 before:content-['·']">
40 <a {href} class="text-foreground-muted no-underline hover:underline">
41 {issue.commentCount}
42 {issue.commentCount === 1 ? "comment" : "comments"}
43 </a>
44 </span>
45</div>