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(resolve(`/${ownerHandle}/${repoName}/issues/${issue.id}` as "/"));
17</script>
18
19<div class="rounded border border-border-default bg-background-default px-6 py-4 shadow-sm">
20 <div class="pb-2">
21 <a {href} class="text-foreground-default no-underline hover:underline">
22 {issue.title}
23 <span class="text-foreground-subtle">#{issue.id}</span>
24 </a>
25 </div>
26
27 <div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
28 <IssueStatePill state={issue.state} />
29
30 <span class="ml-1 flex items-center gap-1">
31 <User handle={issue.authorHandle} did={issue.authorDid} size="sm" />
32 </span>
33
34 <span class="before:mr-1 before:content-['·']">
35 <TimeAgo value={issue.createdAt} />
36 </span>
37
38 <span class="before:mr-1 before:content-['·']">
39 <a {href} class="text-foreground-subtle no-underline hover:underline">
40 {issue.commentCount}
41 {issue.commentCount === 1 ? "comment" : "comments"}
42 </a>
43 </span>
44 </div>
45</div>