display correctly avatar, username and time

src/components/Members/Avatar.tsx

@@ -1,14 +1,21 @@
 import type { UsersResponse } from "../../types/pb_types";
 
-export default function Avatar({author}: {author: UsersResponse}) {
-  console.log(author);
-  if (!author) return null;
-  const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100`;
+type AvatarProps = {
+  avatarUrl?: string;
+  firstName: string;
+  lastName: string;
+}
+
+export default function Avatar({avatarUrl, firstName, lastName}: AvatarProps) {
+  if (avatarUrl !== undefined) {
+    return (
+      <img src={avatarUrl} alt={`${firstName} ${lastName}`} className="rounded-full border-2 border-gray-200 h-full" />
+    )
+  }
+
+  const avatar = `https://api.dicebear.com/7.x/adventurer/svg?flip=true&seed=${firstName}+${lastName}`;
 
   return (
-    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
-      <img src={avatarUrl} alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
-      <p className="ml-2 text-center flex-grow capitalize">{author.firstname} {author.lastname}</p>
-    </div>
+      <img src={avatar} alt="Profile" className="rounded-full border-2 border-gray-200 h-20" />
   )
 }

src/components/Members/Chat/Message.tsx

@@ -1,5 +1,6 @@
 import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
 import Avatar from "../Avatar";
+import { FaRegClock } from "react-icons/fa";
 
 export type MessageExpand = MessagesResponse<{
   author: UsersResponse;
@@ -7,13 +8,23 @@ export type MessageExpand = MessagesResponse<{
 
 
 export default function Message({ message }: { message: MessageExpand }) {
-  console.log(message);
+  if (!message.expand) return null;
+  const author = message.expand.author;
+  const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
+  const date = new Date(message.created);
+  const dateStr = `${date.getHours()}:${date.getMinutes()}`;
 
   return (
-    <div className='flex flex-col items-start justify-center' key={message.id}>
-      {message.expand && <Avatar author={message.expand.author} /> }
-      <div className='p-2 bg-gray-100 rounded-md '>
-        <p>{message.content}</p>
+    <div className='flex justify-start p-4' key={message.id}>
+      {message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />}
+      <div className='flex flex-col items-start justify-center'>
+        <div className='flex items-center my-4 ml-2 gap-2'>
+          <p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
+          <p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
+        </div>
+        <div className='p-2 bg-gray-100 rounded-md '>
+          <p>{message.content}</p>
+        </div>
       </div>
     </div>
   )