diff --git a/src/components/app-body/posts/index.js b/src/components/app-body/posts/index.js index f945223..41aec79 100644 --- a/src/components/app-body/posts/index.js +++ b/src/components/app-body/posts/index.js @@ -10,6 +10,7 @@ import { Container, Row, Col, Spinner, Table } from 'react-bootstrap' // Local libraries import MemoDb from '../../../services/memo-db' import AppUtil from '../../../util' +import PostReplyCount from '../../post-reply-count' import '../../../App.css' const appUtil = new AppUtil() @@ -92,7 +93,10 @@ function RecentPosts () { {truncate(post.addr, 24)} - {post.text} + +
{post.text}
+ + {post.blockHeight} {formatSeen(post.seen)} diff --git a/src/components/app-body/profile/index.js b/src/components/app-body/profile/index.js index 54dc62c..167a9b9 100644 --- a/src/components/app-body/profile/index.js +++ b/src/components/app-body/profile/index.js @@ -8,6 +8,7 @@ import { Container, Row, Col, Spinner, Card } from 'react-bootstrap' import Jdenticon from '@chris.troutner/react-jdenticon' import MemoDb from '../../../services/memo-db' +import PostReplyCount from '../../post-reply-count' import '../../../App.css' import './profile.css' @@ -137,6 +138,7 @@ function Profile () { Block {post.blockHeight} {post.text} + ))} diff --git a/src/components/post-reply-count/index.js b/src/components/post-reply-count/index.js new file mode 100644 index 0000000..0294fd7 --- /dev/null +++ b/src/components/post-reply-count/index.js @@ -0,0 +1,22 @@ +/* + Reply count indicator for a post (icon + number). +*/ + +import React from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faComment } from '@fortawesome/free-solid-svg-icons' + +import './post-reply-count.css' + +function PostReplyCount ({ count = 0 }) { + const label = count === 1 ? '1 reply' : `${count} replies` + + return ( +
+ + {count} +
+ ) +} + +export default PostReplyCount diff --git a/src/components/post-reply-count/post-reply-count.css b/src/components/post-reply-count/post-reply-count.css new file mode 100644 index 0000000..b682720 --- /dev/null +++ b/src/components/post-reply-count/post-reply-count.css @@ -0,0 +1,12 @@ +.post-reply-count { + display: inline-flex; + align-items: center; + gap: 0.35rem; + margin-top: 0.75rem; + color: #6c757d; + font-size: 0.85rem; +} + +.post-reply-count-icon { + font-size: 0.9rem; +}