Comment styling

Author: davidsklar99

pages/checkin/index.ts

@@ -2,13 +2,14 @@ import { LngLatCoords } from "@macrostrat/map-interface";
 import { useState, useCallback } from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { BlankImage, Footer, getProfilePicUrl, getImageUrl } from "~/components/general";
-import { Icon } from "@blueprintjs/core";
+import { Icon, Divider } from "@blueprintjs/core";
 import h from "./main.module.sass";
 import { SETTINGS } from "@macrostrat-web/settings";
 import "@macrostrat/style-system";
 import { Overlay2 } from "@blueprintjs/core";
 import { LithologyList } from "@macrostrat/data-components";
 import { ClientOnly } from "vike-react/ClientOnly";
+import { ExpansionPanel } from "@macrostrat/map-interface";
 
 function Map(props) {
   return h(
@@ -252,22 +253,39 @@ function observationFooter(observation) {
 }
 
 function Comments({comments}) {
+   const commentArr = [];
+
+    comments.forEach((item, index) => {
+        const { created, comment, person_id, name, likes } = item;
+
+        const commentNode = h('div.comment', [
+            h('div.comment-author', [
+                h(BlankImage, {
+                    className: 'comment-pic',
+                    src: getProfilePicUrl(person_id),
+                    alt: "profile picture"
+                }),
+                h('p', { className: 'comment-author' }, name),
+            ]),
+            h('p', { className: 'comment-text' }, comment),
+            h('p', { className: 'comment-date' }, created),
+            h('div.comment-likes', [
+                h(Icon, { icon: 'thumbs-up', className: 'like-icon' }),
+                h('p', { className: 'comment-likes' }, String(likes)),
+            ])
+        ]);
+
+        commentArr.push(commentNode);
+
+        // Add divider between comments (but not after the last one)
+        if (index < comments.length - 1) {
+            commentArr.push(h(Divider));
+        }
+    });
+
     return h('div.comments', [
-        h('h3', 'Comments'), 
-        comments.map(item => {
-            const { created, comment, person_id, name, likes } = item; 
-            return h('div.comment', [
-                h('div.comment-author', [
-                    h(BlankImage, { className: 'profile-picture', src: getProfilePicUrl(person_id), alt: "profile picture" }),
-                    h('p', {className: 'comment-author'}, name),
-                ]),
-                h('p', {className: 'comment-text'}, comment),
-                h('p', {className: 'comment-date'}, created),
-                h('div.comment-likes', [
-                    h(Icon, {icon: 'thumbs-up', className: 'like-icon'}),
-                    h('p', {className: 'comment-likes'}, likes),
-                ])
-            ]);
-        })
+        h('h2', 'Comments'),
+        h(Divider),
+        ...commentArr
     ]);
 }

pages/checkin/main.module.sass

@@ -247,5 +247,30 @@ h4
   width: 50%
   text-align: center
 
-.commment
-  display: flex
+.comments
+  margin-left: 20%
+  width: 60%
+  margin-bottom: 2em
+
+  h2
+    margin: 0
+  
+  .comment
+    display: grid
+    grid-template-columns: 25% 55% 15% 5% 
+    padding: .5em
+    align-items: center
+
+    .comment-likes
+      display: flex
+      gap: .5em
+
+    .comment-author
+      display: flex
+      flex-direction: column
+      justify-content: center
+      align-items: center
+
+    .comment-pic
+      height: 6em
+      width: 6em