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="rounded bg-background-default px-6 py-4 shadow-sm">
22 <div class="pb-2">
23 <a {href} class="text-foreground-default no-underline">
24 <span class="hover:underline">{issue.title}</span>
25 <span class="text-foreground-subtle">#{issue.rkey}</span>
26 </a>
27 </div>
28
29 <div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
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 <span class="before:mr-1 before:content-['·']">
37 <TimeAgo value={issue.createdAt} />
38 </span>
39
40 <span class="before:mr-1 before:content-['·']">
41 <a {href} class="text-foreground-subtle no-underline hover:underline">
42 {issue.commentCount}
43 {issue.commentCount === 1 ? "comment" : "comments"}
44 </a>
45 </span>
46 </div>
47</div>