Retro Bulletin Board Systems on atproto. Web app and TUI.
lazy mirror of alyraffauf/atbbs
atbbs.xyz
forums
python
tui
atproto
bbs
add ListLink for board + discover view
+34
-19
+23
web/src/components/ListLink.tsx
+23
web/src/components/ListLink.tsx
···
1
+
import { Link } from "react-router-dom";
2
+
3
+
interface ListLinkProps {
4
+
to: string;
5
+
name: string;
6
+
description?: string;
7
+
}
8
+
9
+
export default function ListLink({ to, name, description }: ListLinkProps) {
10
+
return (
11
+
<Link
12
+
to={to}
13
+
className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group"
14
+
>
15
+
<span className="text-neutral-200 group-hover:text-white">{name}</span>
16
+
{description && (
17
+
<span className="text-neutral-500 text-xs sm:text-sm">
18
+
{description}
19
+
</span>
20
+
)}
21
+
</Link>
22
+
);
23
+
}
+5
-8
web/src/pages/BBS.tsx
+5
-8
web/src/pages/BBS.tsx
···
7
7
import { makeAtUri } from "../lib/util";
8
8
import { useTitle } from "../hooks/useTitle";
9
9
import Localtime from "../components/Localtime";
10
+
import ListLink from "../components/ListLink";
10
11
import type { BBSLoaderData } from "../router/loaders";
11
12
import PostBody from "../components/PostBody";
12
13
···
66
67
</h2>
67
68
<div className="space-y-1">
68
69
{bbs.site.boards.map((b) => (
69
-
<Link
70
+
<ListLink
70
71
key={b.slug}
71
72
to={`/bbs/${handle}/board/${b.slug}`}
72
-
className="flex items-baseline gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group"
73
-
>
74
-
<span className="text-neutral-200 group-hover:text-white">
75
-
{b.name}
76
-
</span>
77
-
<span className="text-neutral-500">{b.description}</span>
78
-
</Link>
73
+
name={b.name}
74
+
description={b.description}
75
+
/>
79
76
))}
80
77
</div>
81
78
</section>
+6
-11
web/src/pages/Home.tsx
+6
-11
web/src/pages/Home.tsx
···
1
1
import { useEffect, useState, type SyntheticEvent } from "react";
2
-
import { Link, useNavigate } from "react-router-dom";
2
+
import { useNavigate } from "react-router-dom";
3
3
import HandleInput from "../components/HandleInput";
4
+
import ListLink from "../components/ListLink";
4
5
import { resolveIdentitiesBatch } from "../lib/atproto";
5
6
import { SITE } from "../lib/lexicon";
6
7
import { useTitle } from "../hooks/useTitle";
···
114
115
</p>
115
116
<div className="space-y-1">
116
117
{discovered.slice(0, 5).map((d) => (
117
-
<Link
118
+
<ListLink
118
119
key={d.handle}
119
120
to={`/bbs/${encodeURIComponent(d.handle)}`}
120
-
className="flex items-baseline gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group"
121
-
>
122
-
<span className="text-neutral-200 group-hover:text-white wrap-break-word">
123
-
{d.name}
124
-
</span>
125
-
<span className="text-neutral-500 hidden sm:inline">
126
-
{d.desc}
127
-
</span>
128
-
</Link>
121
+
name={d.name}
122
+
description={d.desc}
123
+
/>
129
124
))}
130
125
</div>
131
126
</div>