-
Notifications
You must be signed in to change notification settings - Fork 355
/
Comment.tsx
77 lines (70 loc) · 2.19 KB
/
Comment.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import cn from "classnames";
import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex, HorizontalGutter } from "coral-ui/components";
import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
import TopBarLeft from "./TopBarLeft";
import styles from "./Comment.css";
export interface CommentProps {
className?: string;
username: React.ReactNode;
body: string | null;
createdAt: string;
topBarRight?: React.ReactNode;
footer?: React.ReactNode;
showEditedMarker?: boolean;
highlight?: boolean;
parentAuthorName?: string | null;
userTags?: React.ReactNode;
collapsed?: boolean;
}
const Comment: FunctionComponent<CommentProps> = (props) => {
return (
<HorizontalGutter
role="article"
size="half"
className={cn(styles.root, {
[styles.highlight]: props.highlight,
})}
>
<Flex
direction="row"
justifyContent="space-between"
className={CLASSES.comment.topBar.$root}
>
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
{props.username && props.username}
{props.userTags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp
className={cn(styles.timestamp, CLASSES.comment.topBar.timestamp)}
>
{props.createdAt}
</Timestamp>
{props.showEditedMarker && (
<EditedMarker className={CLASSES.comment.topBar.edited} />
)}
</Flex>
</TopBarLeft>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>
{props.parentAuthorName && (
<div className={styles.subBar}>
<InReplyTo username={props.parentAuthorName} />
</div>
)}
<HorizontalGutter size="oneAndAHalf">
<HTMLContent className={CLASSES.comment.content}>
{props.body || ""}
</HTMLContent>
{props.footer}
</HorizontalGutter>
</HorizontalGutter>
);
};
export default Comment;