leaflet.pub
a tool for shared writing and social publishing
add popover to post header and pub page
awarm.space
+36
-17
+21
app/lish/[did]/[publication]/PublicationAuthor.tsx
+21
app/lish/[did]/[publication]/PublicationAuthor.tsx
···
1
+
"use client";
2
+
import { ProfilePopover } from "components/ProfilePopover";
3
+
4
+
export const PublicationAuthor = (props: {
5
+
did: string;
6
+
displayName?: string;
7
+
handle: string;
8
+
}) => {
9
+
return (
10
+
<p className="italic text-tertiary sm:text-base text-sm">
11
+
<ProfilePopover
12
+
didOrHandle={props.did}
13
+
trigger={
14
+
<span className="hover:underline">
15
+
<strong>by {props.displayName}</strong> @{props.handle}
16
+
</span>
17
+
}
18
+
/>
19
+
</p>
20
+
);
21
+
};
+9
-8
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+9
-8
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
···
18
18
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
19
19
import Post from "app/p/[didOrHandle]/[rkey]/l-quote/[quote]/page";
20
20
import { Separator } from "components/Layout";
21
+
import { ProfilePopover } from "components/ProfilePopover";
21
22
22
23
export function PostHeader(props: {
23
24
data: PostPageData;
···
72
73
<>
73
74
<div className="flex flex-row gap-2 items-center">
74
75
{profile ? (
75
-
<>
76
-
<a
77
-
className="text-tertiary"
78
-
href={`https://bsky.app/profile/${profile.handle}`}
79
-
>
80
-
{profile.displayName || profile.handle}
81
-
</a>
82
-
</>
76
+
<ProfilePopover
77
+
didOrHandle={profile.did}
78
+
trigger={
79
+
<span className="text-tertiary hover:underline">
80
+
{profile.displayName || profile.handle}
81
+
</span>
82
+
}
83
+
/>
83
84
) : null}
84
85
{record.publishedAt ? (
85
86
<>
+6
-9
app/lish/[did]/[publication]/page.tsx
+6
-9
app/lish/[did]/[publication]/page.tsx
···
17
17
import { InteractionPreview } from "components/InteractionsPreview";
18
18
import { LocalizedDate } from "./LocalizedDate";
19
19
import { PublicationHomeLayout } from "./PublicationHomeLayout";
20
+
import { PublicationAuthor } from "./PublicationAuthor";
20
21
21
22
export default async function Publication(props: {
22
23
params: Promise<{ publication: string; did: string }>;
···
91
92
{record?.description}{" "}
92
93
</p>
93
94
{profile && (
94
-
<p className="italic text-tertiary sm:text-base text-sm">
95
-
<strong className="">by {profile.displayName}</strong>{" "}
96
-
<a
97
-
className="text-tertiary"
98
-
href={`https://bsky.app/profile/${profile.handle}`}
99
-
>
100
-
@{profile.handle}
101
-
</a>
102
-
</p>
95
+
<PublicationAuthor
96
+
did={profile.did}
97
+
displayName={profile.displayName}
98
+
handle={profile.handle}
99
+
/>
103
100
)}
104
101
<div className="sm:pt-4 pt-4">
105
102
<SubscribeWithBluesky