feat(comment): extra spacing for last descendant comment

thematters · Oct 21, 2024 · f1bd26e · f1bd26e
1 parent e8d1660
commit f1bd26e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/components/Comment/ThreadComment/DescendantComments/index.tsx b/src/components/Comment/ThreadComment/DescendantComments/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import _uniqBy from 'lodash/uniqBy'
 import { useContext, useEffect } from 'react'
 
@@ -20,6 +21,7 @@ import {
   DESCENDANT_COMMENTS_COMMENT_PRIVATE,
   DESCENDANT_COMMENTS_COMMENT_PUBLIC,
 } from '../gql'
+import styles from './styles.module.css'
 
 type DescendantCommentPublic = NonNullable<
   NonNullable<
@@ -152,8 +154,13 @@ export const DescendantComments = ({
 
   return (
     <>
-      {result.map((node) => (
-        <li key={node.id}>
+      {result.map((node, index) => (
+        <li
+          key={node.id}
+          className={classNames({
+            [styles.lastDescendant]: index === result.length - 1,
+          })}
+        >
           <CommentFeed
             comment={node}
             pinnedComment={pinnedComment}

diff --git a/src/components/Comment/ThreadComment/DescendantComments/styles.module.css b/src/components/Comment/ThreadComment/DescendantComments/styles.module.css
@@ -10,3 +10,7 @@
     margin-top: var(--sp8);
   }
 }
+
+.lastDescendant {
+  margin-bottom: var(--sp16);
+}
diff --git a/src/components/Comment/ThreadComment/index.tsx b/src/components/Comment/ThreadComment/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 
 import { filterComments } from '~/common/utils'
@@ -69,8 +70,13 @@ export const CommentThreadComment = ({
 
         {descendants.length > 0 && (
           <ul className={styles.descendants}>
-            {descendants.map((descendantComment) => (
-              <li key={descendantComment.id}>
+            {descendants.map((descendantComment, index) => (
+              <li
+                key={descendantComment.id}
+                className={classNames({
+                  [styles.lastDescendant]: index === descendants.length - 1,
+                })}
+              >
                 <CommentFeed
                   comment={descendantComment}
                   pinnedComment={pinnedComment}

diff --git a/src/components/Comment/ThreadComment/styles.module.css b/src/components/Comment/ThreadComment/styles.module.css
@@ -15,3 +15,7 @@
     transition-property: background-color;
   }
 }
+
+.lastDescendant {
+  margin-bottom: var(--sp16);
+}