From abf6e96383035f99addab804e8c3dd1a74d36375 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 17 Dec 2021 17:58:03 +0100
Subject: chore: display comments list on posts

---
 .../CommentsList/CommentsList.module.scss          |  5 +++++
 src/components/CommentsList/CommentsList.tsx       | 24 ++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/components/CommentsList/CommentsList.module.scss
 create mode 100644 src/components/CommentsList/CommentsList.tsx

(limited to 'src/components/CommentsList')

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;
-- 
cgit v1.2.3