Added MaterialUI

client/src/components/post/CommentItem.tsx

@@ -4,10 +4,22 @@ import formatDate from "../../utils/formatDate";
 import { deleteComment } from "../../actions/post";
 import { useAppDispatch, useAppSelector } from "../../utils/hooks";
 import { Comment } from "../../types";
+import {
+  Avatar,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Container,
+  Typography,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 interface CommentItemProps {
   postId: string;
   comment: Comment;
 }
+
 const CommentItem = ({
   postId,
   comment: { _id, text, name, avatar, user, date },
@@ -15,27 +27,27 @@ const CommentItem = ({
   const dispatch = useAppDispatch();
   const auth = useAppSelector((state) => state.auth);
   return (
-    <div className="post bg-white p-1 my-1">
-      <div>
-        <Link to={`/profile/${user}`}>
-          <img className="round-img" src={avatar} alt="" />
-          <h4>{name}</h4>
-        </Link>
-      </div>
-      <div>
-        <p className="my-1">{text}</p>
-        <p className="post-date">Posted on {formatDate(date)}</p>
-        {!auth.loading && auth.user !== null && user === auth.user._id && (
-          <button
-            onClick={async () => await dispatch(deleteComment(postId, _id))}
-            type="button"
-            className="btn btn-danger"
-          >
-            <i className="fas fa-times" />
-          </button>
-        )}
-      </div>
-    </div>
+    <Container maxWidth="sm">
+      <Card variant="outlined">
+        <CardHeader
+          avatar={<Avatar src={avatar}>R</Avatar>}
+          title={<Link to={`/profile/${user}`}>{name}</Link>}
+          subheader={formatDate(date)}
+        />
+        <CardContent>
+          <Typography variant="subtitle1">{text}</Typography>
+        </CardContent>
+        <Box display={"inline"}>
+          {!auth.loading && auth.user !== null && user === auth.user._id && (
+            <Button
+              onClick={async () => await dispatch(deleteComment(postId, _id))}
+            >
+              <DeleteIcon />
+            </Button>
+          )}
+        </Box>
+      </Card>
+    </Container>
   );
 };