chore: display comments list on posts

2 files changed, 29 insertions, 0 deletions

diff --git a/src/components/CommentsList/CommentsList.module.scss b/src/components/CommentsList/CommentsList.module.scss
new file mode 100644
index 0000000..2358948
--- /dev/null
+++ b/src/components/CommentsList/CommentsList.module.scss
@@ -0,0 +1,5 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %reset-ordered-list;
+}
diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
new file mode 100644
index 0000000..6599475
--- /dev/null
+++ b/src/components/CommentsList/CommentsList.tsx
@@ -0,0 +1,24 @@
+import { Comment as CommentData } from '@ts/types/comments';
+import Comment from '@components/Comment/Comment';
+import { t } from '@lingui/macro';
+import styles from './CommentsList.module.scss';
+
+const CommentsList = ({ comments }: { comments: CommentData[] }) => {
+  const getCommentsList = () => {
+    return comments.map((comment) => {
+      return <Comment key={comment.id} comment={comment} />;
+    });
+  };
+
+  return (
+    <>
+      {comments.length > 0 ? (
+        <ol className={styles.list}>{getCommentsList()}</ol>
+      ) : (
+        <p>{t`No comments yet.`}</p>
+      )}
+    </>
+  );
+};
+
+export default CommentsList;