home page is done

src/components/home/ChatsList.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Card from "./Card.jsx";
+
+const ChatsList = (props) => {
+    const { chats } = props;
+
+    const colorMap = {
+        orange: 'FFA500FF',
+        aqua: '00FFFFFF',
+        crimson: 'DC143CFF',
+        red: 'FF0000FF',
+        violet: '8A2BE2FF',
+        seagreen: '20B2AAFF',
+        green: 'ADFF2FFF',
+        blue: '0000FFFF',
+        pink: 'FF1493FF',
+        cyan: '72FAFAFF'
+    }
+
+    function getColor(chatId) {
+        const keys = Object.keys(colorMap);
+        const index = chatId % keys.length;
+        return colorMap[keys[index]];
+    }
+
+  return (
+      <div className="ChatsList">
+          {chats.map((item, index) => (
+              <Card
+                  key={index}
+                  name={item.name}
+                  lastMessage={item.lastMessage}
+                  id={item.id}
+                  color={getColor(item.id)}
+              />
+          ))}
+      </div>
+  );
+};
+
+export default ChatsList;