leaflet.pub
a tool for shared writing and social publishing
simplify notification component structure
awarm.space
+31
-61
+10
-4
app/(home-pages)/notifications/CommentNotication.tsx
+10
-4
app/(home-pages)/notifications/CommentNotication.tsx
···
7
7
import { HydratedCommentNotification } from "src/notifications";
8
8
import { blobRefToSrc } from "src/utils/blobRefToSrc";
9
9
import { Avatar } from "components/Avatar";
10
+
import { CommentTiny } from "components/Icons/CommentTiny";
10
11
import {
11
12
CommentInNotification,
12
13
ContentLayout,
···
19
20
let commentRecord = props.commentData.record as PubLeafletComment.Record;
20
21
let profileRecord = props.commentData.bsky_profiles
21
22
?.record as AppBskyActorProfile.Record;
23
+
const displayName = profileRecord.displayName || "Someone";
22
24
return (
23
25
<Notification
24
-
identity={profileRecord.displayName || "Someone"}
25
-
action={{ type: "comment" }}
26
+
icon={<CommentTiny />}
27
+
actionText={
28
+
<>
29
+
{displayName} commented on your post
30
+
</>
31
+
}
26
32
content={
27
33
<ContentLayout postTitle={docRecord.title}>
28
34
<CommentInNotification
···
52
58
export const DummyCommentNotification = () => {
53
59
return (
54
60
<Notification
55
-
identity={"celine"}
56
-
action={{ type: "comment" }}
61
+
icon={<CommentTiny />}
62
+
actionText={<>celine commented on your post</>}
57
63
content={
58
64
<ContentLayout postTitle="This is the Post Title">
59
65
<CommentInNotification
+9
-6
app/(home-pages)/notifications/FollowNotification.tsx
+9
-6
app/(home-pages)/notifications/FollowNotification.tsx
···
1
+
import { Avatar } from "components/Avatar";
1
2
import { Notification } from "./Notification";
2
3
3
4
export const DummyFollowNotification = () => {
5
+
const identity = "celine";
6
+
const pubName = "Pub Name Here";
4
7
return (
5
8
<Notification
6
-
identity={"celine"}
7
-
action={{
8
-
type: "follow",
9
-
avatar: undefined,
10
-
pubName: "Pub Name Here",
11
-
}}
9
+
icon={<Avatar src={undefined} displayName={identity} tiny />}
10
+
actionText={
11
+
<>
12
+
{identity} followed {pubName}!
13
+
</>
14
+
}
12
15
/>
13
16
);
14
17
};
+5
-4
app/(home-pages)/notifications/MentionNotification.tsx
+5
-4
app/(home-pages)/notifications/MentionNotification.tsx
···
1
+
import { MentionTiny } from "components/Icons/MentionTiny";
1
2
import { ContentLayout, Notification } from "./Notification";
2
3
3
4
export const DummyPostMentionNotification = () => {
4
5
return (
5
6
<Notification
6
-
identity={"celine"}
7
-
action={{ type: "post-mention" }}
7
+
icon={<MentionTiny />}
8
+
actionText={<>celine mentioned your post</>}
8
9
content={
9
10
<ContentLayout postTitle={"Post Title Here"}>
10
11
I'm just gonna put the description here. The surrounding context is
···
24
25
export const DummyUserMentionNotification = () => {
25
26
return (
26
27
<Notification
27
-
identity={"celine"}
28
-
action={{ type: "user-mention" }}
28
+
icon={<MentionTiny />}
29
+
actionText={<>celine mentioned you</>}
29
30
content={
30
31
<ContentLayout postTitle={"Post Title Here"}>
31
32
<div>
+4
-45
app/(home-pages)/notifications/Notification.tsx
+4
-45
app/(home-pages)/notifications/Notification.tsx
···
1
1
import { Avatar } from "components/Avatar";
2
2
import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
3
-
import { CommentTiny } from "components/Icons/CommentTiny";
4
-
import { ReplyTiny } from "components/Icons/ReplyTiny";
5
3
import { PubLeafletRichtextFacet } from "lexicons/api";
6
-
import { MentionTiny } from "components/Icons/MentionTiny";
7
-
import { PubIcon } from "components/ActionBar/Publications";
8
4
9
5
export const Notification = (props: {
10
-
identity: string;
11
-
action:
12
-
| { type: "comment" }
13
-
| { type: "reply" }
14
-
| { type: "follow"; avatar: string | undefined; pubName: string }
15
-
| { type: "post-mention" }
16
-
| { type: "user-mention" };
17
-
6
+
icon: React.ReactNode;
7
+
actionText: React.ReactNode;
18
8
content?: React.ReactNode;
19
9
}) => {
20
10
return (
21
11
<div className="flex flex-col w-full">
22
12
<div className="flex flex-row gap-2 items-center">
23
-
<div className="text-secondary shrink-0">
24
-
{props.action.type === "comment" ? (
25
-
<CommentTiny />
26
-
) : props.action.type === "reply" ? (
27
-
<ReplyTiny />
28
-
) : props.action.type === "follow" ? (
29
-
<Avatar
30
-
src={props.action.avatar}
31
-
displayName={props.identity}
32
-
tiny
33
-
/>
34
-
) : props.action.type === "post-mention" ? (
35
-
<MentionTiny />
36
-
) : props.action.type === "user-mention" ? (
37
-
<MentionTiny />
38
-
) : (
39
-
""
40
-
)}
41
-
</div>
42
-
<div className="text-secondary font-bold">
43
-
{props.identity}{" "}
44
-
{props.action.type === "comment"
45
-
? "commented on your post"
46
-
: props.action.type === "reply"
47
-
? "replied to your comment"
48
-
: props.action.type === "follow"
49
-
? `followed ${props.action.pubName}!`
50
-
: props.action.type === "post-mention"
51
-
? `mentioned your post`
52
-
: props.action.type === "user-mention"
53
-
? "mentioned you"
54
-
: "did something!"}
55
-
</div>
13
+
<div className="text-secondary shrink-0">{props.icon}</div>
14
+
<div className="text-secondary font-bold">{props.actionText}</div>
56
15
</div>
57
16
{props.content && (
58
17
<div className="flex flex-row gap-2 mt-1 w-full">
+3
-2
app/(home-pages)/notifications/ReplyNotification.tsx
+3
-2
app/(home-pages)/notifications/ReplyNotification.tsx
···
1
1
import { Avatar } from "components/Avatar";
2
2
import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
3
+
import { ReplyTiny } from "components/Icons/ReplyTiny";
3
4
import {
4
5
CommentInNotification,
5
6
ContentLayout,
···
9
10
export const DummyReplyNotification = () => {
10
11
return (
11
12
<Notification
12
-
identity={"jared"}
13
-
action={{ type: "reply" }}
13
+
icon={<ReplyTiny />}
14
+
actionText={<>jared replied to your comment</>}
14
15
content={
15
16
<ContentLayout postTitle="This is the Post Title">
16
17
<CommentInNotification