leaflet.pub
a tool for shared writing and social publishing
added tag page
cozylittle.house
+73
-5
+2
-3
app/(home-pages)/reader/ReaderContent.tsx
+2
-3
app/(home-pages)/reader/ReaderContent.tsx
···
6
6
import { getReaderFeed } from "./getReaderFeed";
7
7
import { useEffect, useRef } from "react";
8
8
import Link from "next/link";
9
-
import { PostLink } from "components/PostLink";
10
-
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
9
+
import { PostListing } from "components/PostListing";
11
10
12
11
export const ReaderContent = (props: {
13
12
posts: Post[];
···
69
68
return (
70
69
<div className="flex flex-col gap-3 relative">
71
70
{allPosts.map((p) => (
72
-
<PostLink {...p} key={p.documents.uri} />
71
+
<PostListing {...p} key={p.documents.uri} />
73
72
))}
74
73
{/* Trigger element for loading more posts */}
75
74
<div
+9
app/(home-pages)/tag/TagHeader.tsx
+9
app/(home-pages)/tag/TagHeader.tsx
+60
app/(home-pages)/tag/page.tsx
+60
app/(home-pages)/tag/page.tsx
···
1
+
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
2
+
import { TagHeader } from "./TagHeader";
3
+
import { Tag } from "components/Tags";
4
+
import { Separator } from "components/Layout";
5
+
6
+
export default async function TagPage(props: {}) {
7
+
return (
8
+
<DashboardLayout
9
+
id="tag"
10
+
cardBorderHidden={false}
11
+
currentPage="tag"
12
+
defaultTab="default"
13
+
actions={null}
14
+
tabs={{
15
+
default: {
16
+
controls: null,
17
+
content: <TagContent />,
18
+
},
19
+
}}
20
+
/>
21
+
);
22
+
}
23
+
24
+
const TagContent = () => {
25
+
return (
26
+
<div className="max-w-prose mx-auto w-full grow shrink-0">
27
+
<div className="discoverHeader flex flex-col gap-3 items-center text-center pt-2 px-4">
28
+
<TagHeader />
29
+
<RelatedTags />
30
+
</div>
31
+
<div className="pt-6 flex flex-col gap-3">
32
+
<DummyPost />
33
+
<DummyPost />
34
+
<DummyPost />
35
+
<DummyPost />
36
+
<DummyPost />
37
+
<DummyPost />
38
+
<DummyPost />
39
+
<DummyPost />
40
+
</div>
41
+
</div>
42
+
);
43
+
};
44
+
const DummyPost = () => {
45
+
return (
46
+
<div className="h-[202px] w-full bg-bg-page border border-border-light rounded-lg" />
47
+
);
48
+
};
49
+
50
+
const RelatedTags = () => {
51
+
return (
52
+
<div className="flex flex-wrap gap-1 text-tertiary text-sm items-center ">
53
+
<div className="font-bold pr-2">Related</div>
54
+
<Tag name="i am" />
55
+
<Tag name="a related tag" />
56
+
<Tag name="but i don't know" />
57
+
<Tag name="if I'm in scope" />
58
+
</div>
59
+
);
60
+
};
+1
-1
components/PostLink.tsx
components/PostListing.tsx
+1
-1
components/PostLink.tsx
components/PostListing.tsx
···
14
14
import Link from "next/link";
15
15
import { InteractionPreview } from "./InteractionsPreview";
16
16
17
-
export const PostLink = (props: Post) => {
17
+
export const PostListing = (props: Post) => {
18
18
let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record;
19
19
20
20
let postRecord = props.documents.data as PubLeafletDocument.Record;