basic comment rendering

Falilah · Feb 14, 2022 · 041c0bd · 041c0bd
1 parent 58e9b42
commit 041c0bd
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/components/Comments.tsx b/components/Comments.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, Spinner, Stack, Center } from "@chakra-ui/react";
 import useComments from "../hooks/useComments";
 
 interface CommentsProps {
@@ -9,7 +9,22 @@ interface CommentsProps {
 const Comments: React.FunctionComponent<CommentsProps> = ({ topic }) => {
   const query = useComments({ topic });
 
-  return <Box as="pre">{JSON.stringify(query.data, null, 2)}</Box>;
+  return (
+    <Box>
+      {query.isLoading && (
+        <Center p={8}>
+          <Spinner />
+        </Center>
+      )}
+      <Stack spacing={4}>
+        {query.data?.map((comment) => (
+          <Box key={comment.id} bg="whiteAlpha.100" rounded="lg" p={3}>
+            {comment.message}
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
 };
 
 export default Comments;