Leaflet Blog in Deno Fresh
knotbin.com
1import { useSignal } from "@preact/signals";
2import { useEffect } from "preact/hooks";
3import { PostListItem } from "../components/post-list-item.tsx";
4import { PubLeafletDocument } from "@atcute/leaflet";
5
6interface PostRecord {
7 value: PubLeafletDocument.Main;
8 uri: string;
9}
10
11export default function PostList({
12 posts: initialPosts,
13}: {
14 posts: PostRecord[];
15}) {
16 const posts = useSignal(initialPosts);
17
18 useEffect(() => {
19 posts.value = initialPosts;
20 }, [initialPosts]);
21
22 return (
23 <>
24 {posts.value?.map((record) => {
25 const post = record.value;
26 const rkey = record.uri.split("/").pop() || "";
27 return <PostListItem key={record.uri} post={post} rkey={rkey} />;
28 })}
29 </>
30 );
31}