leaflet.pub
a tool for shared writing and social publishing
new comment design
cozylittle.house
+1
-1
app/p/[didOrHandle]/ProfilePageLayout.tsx
+1
-1
app/p/[didOrHandle]/ProfilePageLayout.tsx
+49
-75
app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx
+49
-75
app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx
···
1
import Post from "app/lish/[did]/[publication]/[rkey]/l-quote/[quote]/page";
2
import { CommentTiny } from "components/Icons/CommentTiny";
3
4
export const CommentTabContent = () => {
5
let isReply = true;
6
return (
7
<>
8
-
<CommentWrapper2 isReply />
9
-
<CommentWrapper2 />
10
-
<CommentWrapper2 />
11
-
<CommentWrapper2 isReply />
12
</>
13
);
14
};
15
16
-
const PostListingCompact = (props: { title: string; pubName: string }) => {
17
-
return (
18
-
<div className=" flex gap-2 justify-between border-b border-border-light pt-2 pb-0.5 text-xs text-tertiary font-bold text-left">
19
-
{props.title}
20
-
<div className="flex gap-2 text-xs text-tertiary font-normal items-center">
21
-
{props.pubName}
22
-
</div>
23
-
</div>
24
-
);
25
-
};
26
-
27
const Comment = (props: {
28
displayName: React.ReactNode;
29
-
handle: string;
30
comment: string;
31
-
reply?: boolean;
32
}) => {
33
return (
34
-
<div className={`w-full flex flex-col ${props.reply ? "text-xs" : ""}`}>
35
-
<div className="flex gap-2">
36
-
<div className="flex flex-col min-h-full shrink-0 ">
37
-
<div className={`rounded-full bg-test shrink-0 w-5 h-5`} />
38
-
39
-
{props.reply && (
40
-
<div className={`border-l border-border-light h-full mx-auto`} />
41
-
)}
42
-
</div>
43
-
<div className={`flex flex-col`}>
44
<div className="flex flex-row gap-2">
45
-
<div
46
-
className={` font-bold ${props.reply ? "text-tertiary" : "text-primary"}`}
47
-
>
48
-
{props.displayName}
49
</div>
50
-
{props.reply && <div>reply</div>}
51
</div>
52
-
<div
53
-
className={`w-full text-left ${props.reply ? "truncate text-tertiary" : "text-secondary"} `}
54
-
>
55
{props.comment}
56
</div>
57
</div>
···
59
</div>
60
);
61
};
62
-
63
-
const CommentWrapper1 = (props: { isReply?: boolean }) => {
64
-
return (
65
-
<div className="flex flex-col rounded-md pb-8">
66
-
<PostListingCompact title="Post Title Here" pubName="Pub Name" />
67
-
{props.isReply && (
68
-
<Comment
69
-
displayName="jared"
70
-
handle="awarm.space"
71
-
comment="this is some content that i am would like a reply to. It's really really long"
72
-
reply
73
-
/>
74
-
)}
75
-
<Comment
76
-
displayName="celine"
77
-
handle="cozylittle.house"
78
-
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
79
-
/>
80
-
</div>
81
-
);
82
-
};
83
-
84
-
const CommentWrapper2 = (props: { isReply?: boolean }) => {
85
-
return (
86
-
<div className="mb-8">
87
-
<Comment
88
-
displayName={
89
-
<div className="font-normal text-tertiary text-sm">
90
-
<span className="font-bold">celine </span>commented on{" "}
91
-
<span className=" italic text-accent-contrast">
92
-
Leaflet Lab Notes
93
-
</span>
94
-
</div>
95
-
}
96
-
handle="cozylittle.house"
97
-
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
98
-
/>
99
-
</div>
100
-
);
101
-
};
···
1
import Post from "app/lish/[did]/[publication]/[rkey]/l-quote/[quote]/page";
2
import { CommentTiny } from "components/Icons/CommentTiny";
3
+
import { ReplyTiny } from "components/Icons/ReplyTiny";
4
5
export const CommentTabContent = () => {
6
let isReply = true;
7
return (
8
<>
9
+
<Comment
10
+
displayName="celine"
11
+
postTitle="Tagging and Flaggin Babyyyy make this super long so it doesn't wrap around please"
12
+
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
13
+
isReply
14
+
/>
15
+
<Comment
16
+
displayName="celine"
17
+
postTitle="Another day, another test post eh,"
18
+
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
19
+
/>
20
+
<Comment
21
+
displayName="celine"
22
+
postTitle="Some other post title"
23
+
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
24
+
/>
25
+
<Comment
26
+
displayName="celine"
27
+
postTitle="Leaflet Lab Notes"
28
+
comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
29
+
isReply
30
+
/>
31
</>
32
);
33
};
34
35
const Comment = (props: {
36
displayName: React.ReactNode;
37
+
postTitle: string;
38
comment: string;
39
+
isReply?: boolean;
40
}) => {
41
return (
42
+
<div className={`w-full flex flex-col text-left mb-8`}>
43
+
<div className="flex gap-2 w-full">
44
+
<div className={`rounded-full bg-test shrink-0 w-5 h-5`} />
45
+
<div className={`flex flex-col w-full min-w-0 grow`}>
46
<div className="flex flex-row gap-2">
47
+
<div className={`text-tertiary text-sm truncate`}>
48
+
<span className="font-bold text-secondary">
49
+
{props.displayName}
50
+
</span>{" "}
51
+
{props.isReply ? "replied" : "commented"} on{" "}
52
+
<span className=" italic text-accent-contrast">
53
+
{props.postTitle}
54
+
</span>
55
</div>
56
</div>
57
+
{props.isReply && (
58
+
<div className="text-xs text-tertiary flex flex-row gap-2 w-full my-0.5 items-center">
59
+
<ReplyTiny className="shrink-0" />
60
+
<div className="font-bold shrink-0">jared</div>
61
+
<div className="grow truncate">
62
+
this is the content of what i was saying and its very long so i
63
+
can get a good look at what's happening
64
+
</div>
65
+
</div>
66
+
)}
67
+
68
+
<div className={`w-full text-left text-secondary `}>
69
{props.comment}
70
</div>
71
</div>
···
73
</div>
74
);
75
};