add group chat

src/views/home/group/chat/MessageItem.tsx

@@ -0,0 +1,81 @@
+import { FC } from 'react';
+import { useAppSelector } from '../../../../redux/hooks';
+
+function convertDate(isoString: string) {
+    const date = new Date(isoString);
+
+    const dd = String(date.getUTCDate()).padStart(2, '0');
+    const mm = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const yyyy = date.getUTCFullYear();
+
+    const hh = String(date.getUTCHours()).padStart(2, '0');
+    const min = String(date.getUTCMinutes()).padStart(2, '0');
+
+    return `${dd}.${mm}.${yyyy} ${hh}:${min}`;
+}
+
+interface MessageItemProps {
+    id: number;
+    groupId: number;
+    authorId: number;
+    authorUsername: string;
+    createdAt: string;
+    message: string;
+    myMessage: boolean;
+}
+
+export const MessageItem: FC<MessageItemProps> = ({
+    authorId,
+    authorUsername,
+    createdAt,
+    message,
+    myMessage,
+}) => {
+    const members = useAppSelector(
+        (state) => state.groups.fetchGroupById.group?.members,
+    );
+    const member = members?.find((m) => m.userId === authorId);
+
+    return myMessage ? (
+        <div className="flex flex-col gap-[20px] items-end leading-[20px] text-[16px]">
+            <div className="w-[50%] flex flex-col gap-[10px]">
+                <div className="h-[20px] w-full flex gap-[10px] relative  justify-end ">
+                    <div className="font-bold text-liquid-light">
+                        {convertDate(createdAt)}
+                    </div>
+                </div>
+
+                <div className="flex justify-end">
+                    <div className="bg-liquid-lighter w-fit max-w-full break-words px-[16px] py-[8px] rounded-[10px] ">
+                        {message}
+                    </div>
+                </div>
+            </div>
+        </div>
+    ) : (
+        <div className="flex flex-col gap-[20px] ">
+            <div className="w-[50%] flex flex-col gap-[10px]">
+                <div className="h-[40px] w-full flex gap-[10px] relative ">
+                    <div className="h-[40px] w-[40px] bg-[#D9D9D9] rounded-[10px]"></div>
+                    <div className=" leading-[20px] font-bold text-[16px] ">
+                        <div>{authorUsername} </div>
+                        <div className="text-liquid-light">
+                            {member ? member.role : 'роль не найдена'}
+                        </div>
+                    </div>
+                    <div className=" leading-[20px] font-bold text-[16px] ">
+                        <div className="text-liquid-light">
+                            {convertDate(createdAt)}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex">
+                    <div className="bg-liquid-lighter w-fit max-w-full break-words px-[16px] py-[8px] rounded-[10px] ">
+                        {message}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};