Feat: fix profile avatars in comments

This reverts the change to the comment content body component in the previous commit.

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
-
+import Image from 'next/image';
 import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 
@@ -28,8 +28,24 @@ const CommentCardBody: FC<CommentCardProps> = ({
 }) => {
   const [inEditMode, setInEditMode] = useState(false);
 
+  const { userAvatar } = comment.postedBy;
   return (
-    <div ref={ref}>
+    <div ref={ref} className="flex">
+      <div className="w-[12%] py-4 justify-center">
+        <div className="px-1 mask mask-circle">
+          {!userAvatar ? null : (
+            <Image
+              src={userAvatar.path}
+              alt="user avatar"
+              width={1000}
+              height={1000}
+              className="h-full w-full"
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="w-[88%] h-full">
         {!inEditMode ? (
           <CommentContentBody comment={comment} setInEditMode={setInEditMode} />
         ) : (
@@ -42,6 +58,7 @@ const CommentCardBody: FC<CommentCardProps> = ({
           />
         )}
       </div>
+    </div>
   );
 };
 

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -5,7 +5,7 @@ import { Dispatch, FC, SetStateAction, useContext } from 'react';
 import { Rating } from 'react-daisyui';
 import Link from 'next/link';
 import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
-import Image from 'next/image';
+
 import { z } from 'zod';
 import CommentCardDropdown from './CommentCardDropdown';
 
@@ -19,25 +19,8 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
   const timeDistance = useTimeDistance(new Date(comment.createdAt));
 
   return (
-    <div className="card-body animate-in fade-in-10">
-      <div className="flex space-x-5">
-        <div className="w-2/12 avatar display flex items-center justify-center">
-          <div className="w-28 h-28 rounded-full ring ring-primary">
-            {comment.postedBy.userAvatar ? (
-              <Image
-                src={comment.postedBy.userAvatar.path}
-                alt={comment.postedBy.userAvatar.alt}
-                width={200}
-                height={200}
-              />
-            ) : (
-              <div className="flex items-center justify-center w-full h-full text-2xl font-bold text-white bg-primary rounded-full">
-                {comment.postedBy.username[0]}
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="w-10/12 space-y-2">
+    <div className="pr-3 py-4 animate-in fade-in-10 space-y-1">
+      <div className="space-y-2">
         <div className="flex flex-row justify-between">
           <div>
             <p className="font-semibold sm:text-2xl">
@@ -74,10 +57,9 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
             ))}
           </Rating>
         </div>
+      </div>
       <div>
-            <p>{comment.content}</p>
-          </div>
-        </div>
+        <p className="text-sm">{comment.content}</p>
       </div>
     </div>
   );

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -81,7 +81,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
   };
 
   return (
-    <div className="card-body animate-in fade-in-10">
+    <div className="pr-3 py-4 animate-in fade-in-10">
       <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
         <div>
           <FormInfo>

src/prisma/seed/create/createNewUserAvatars.ts

@@ -18,8 +18,9 @@ const createNewUserAvatars = async ({
 }: CreateNewUserAvatarsArgs) => {
   const userAvatars: UserAvatarData[] = [];
 
-  const path = imageUrls[Math.floor(Math.random() * imageUrls.length)];
   users.forEach((user) => {
+    const path = imageUrls[Math.floor(Math.random() * imageUrls.length)];
+
     userAvatars.push({
       path,
       alt: `${user.firstName} ${user.lastName}`,