Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
web: add ThreadLink for thread views
+36
-11
+30
web/src/components/ThreadLink.tsx
+30
web/src/components/ThreadLink.tsx
···
1
+
import { Link } from "react-router-dom";
2
+
3
+
interface ThreadLinkProps {
4
+
to: string;
5
+
title: string;
6
+
meta: string;
7
+
preview: string;
8
+
}
9
+
10
+
export default function ThreadLink({
11
+
to,
12
+
title,
13
+
meta,
14
+
preview,
15
+
}: ThreadLinkProps) {
16
+
return (
17
+
<Link
18
+
to={to}
19
+
className="block px-3 py-4 -mx-3 rounded hover:bg-neutral-900 group"
20
+
>
21
+
<div className="flex items-baseline justify-between gap-4">
22
+
<span className="text-neutral-300 group-hover:text-white truncate">
23
+
{title}
24
+
</span>
25
+
<span className="shrink-0 text-xs text-neutral-500">{meta}</span>
26
+
</div>
27
+
<p className="text-neutral-500 text-xs mt-1 line-clamp-1">{preview}</p>
28
+
</Link>
29
+
);
30
+
}
+6
-11
web/src/pages/Board.tsx
+6
-11
web/src/pages/Board.tsx
···
1
1
import { useEffect, useState, type SyntheticEvent } from "react";
2
2
import {
3
-
Link,
4
3
useLoaderData,
5
4
useNavigate,
6
5
useRevalidator,
···
12
11
import { makeAtUri, parseAtUri, relativeDate } from "../lib/util";
13
12
import { BOARD } from "../lib/lexicon";
14
13
import { createThread, uploadAttachments } from "../lib/writes";
14
+
import ThreadLink from "../components/ThreadLink";
15
15
import ComposeForm from "../components/ComposeForm";
16
16
import {
17
17
hydrateThreadPage,
···
130
130
<div>
131
131
{threads.length ? (
132
132
threads.map((t) => (
133
-
<Link
133
+
<ThreadLink
134
134
key={t.uri}
135
135
to={`/bbs/${handle}/thread/${t.did}/${t.rkey}`}
136
-
className="flex items-baseline justify-between gap-4 px-3 py-2.5 -mx-3 rounded hover:bg-neutral-900 group"
137
-
>
138
-
<span className="text-neutral-300 group-hover:text-white truncate">
139
-
{t.title}
140
-
</span>
141
-
<span className="shrink-0 text-xs text-neutral-500">
142
-
{t.handle} · {relativeDate(t.createdAt)}
143
-
</span>
144
-
</Link>
136
+
title={t.title}
137
+
meta={`${t.handle} · ${relativeDate(t.createdAt)}`}
138
+
preview={t.body.substring(0, 120)}
139
+
/>
145
140
))
146
141
) : (
147
142
<p className="text-neutral-500">No threads yet.</p>