home page is done

src/components/home/Card.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+import styled from "styled-components";
+
+const Card = (props) => {
+    const interlocutorId = props.id
+
+    const hexToRgb = (hex) => {
+        hex = hex.replace(/^#/, '');
+
+        let r = parseInt(hex.slice(0, 2), 16);
+        let g = parseInt(hex.slice(2, 4), 16);
+        let b = parseInt(hex.slice(4, 6), 16);
+
+        return `${r}, ${g}, ${b}`;
+    }
+
+    const handleClick = (event, id) => {
+        localStorage.setItem('interlocutorId', id);
+    };
+
+    const StyledCard = styled.div`
+        box-shadow: 0 10px 40px rgba(176, 175, 189, 0.85);
+
+        padding: 2vw;
+
+        display: flex;
+        flex-direction: column;
+
+        border-radius: 2vw;
+
+        align-items: flex-start;
+        justify-content: space-between;
+
+        background-color: ${props => props.color 
+                ? `rgba(${hexToRgb(props.color)}, 0.63)` 
+                : 'rgba(255, 255, 255, 0.63)'};
+
+        transition: box-shadow 0.3s ease-in;
+        
+        div, h2 {
+            transition: color 0.3s ease-in;
+        }
+
+        &:hover {
+            box-shadow: 0 10px 40px rgb(${hexToRgb(props.color)});
+            cursor: pointer;
+            
+            div, h2 {
+                color: white;
+            }
+        }
+
+        @media only screen and (max-width: 800px) {
+            flex-direction: column;
+            
+            border-radius: 2vh;
+            padding: 3vw;
+        }
+    `
+
+  return (
+      <a
+          href={URLs.chat.url}
+          className="ChatCard"
+          onClick={(event) => handleClick(event, interlocutorId)}
+      >
+          <StyledCard color={props.color}>
+              <h2>{props.name}</h2>
+              <div className="lastMessageStyle">{props.lastMessage}</div>
+          </StyledCard>
+      </a>
+  );
+};
+
+export default Card;

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;

src/components/home/HomeTitle.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import chatIcon from './../../../images/chat.svg';
+import { URLs } from "../../__data__/urls";
+
+const HomeTitle = () => {
+  return (
+      <a className="homeTitleWrapper" href={URLs.baseUrl}>
+          <h1 className="montecarlo-regular homeTitle">Enterfront</h1>
+          <img src={chatIcon} alt="Chat Icon" className="chatIcon"/>
+      </a>
+  );
+};
+
+export default HomeTitle;

src/components/home/css/card.css

@@ -0,0 +1,46 @@
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}
+
+.ChatCard {
+    margin-bottom: 40px;
+    max-width: 30vw;
+    min-width: 20vw;
+
+    margin-left: 1.2vw;
+    margin-right: 1.2vw;
+
+    border-radius: 2vw;
+
+    transition: transform 0.2s ease-in;
+}
+
+.lastMessageStyle {
+    width: 80%;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media only screen and (max-width: 800px) {
+    .ChatCard {
+        width: 30vw;
+        max-width: 30vw;
+
+        margin-left: 4vw;
+        margin-right: 4vw;
+    }
+
+    .ChatsList {
+        margin: 10vw;
+    }
+}
+
+.ChatCard:hover {
+    transform: translate(2px, -10px);
+}

src/components/home/css/homeTitle.css

@@ -0,0 +1,25 @@
+.homeTitleWrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+.homeTitle {
+    font-size: 5vw;
+    transition: color 0.3s ease-in;
+}
+
+.homeTitleWrapper:hover h1 {
+    color: orange;
+}
+
+
+@media only screen and (max-width: 800px) {
+    .homeTitle {
+        font-size: 8vh;
+    }
+}
+
+.chatIcon {
+    width: 6vw;
+    margin-left: 3vw;
+}

src/components/home/index.css

@@ -0,0 +1,2 @@
+@import url("./css/card.css");
+@import url("./css/homeTitle.css");

src/index.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=McLaren&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
 
 @import url("pages/index.css");
 @import url("outer/index.css");
@@ -25,6 +26,7 @@ code {
     font-size: 1.2vw;
     font-family: "Montserrat", 'sans-serif';
     color: black;
+    text-decoration: none;
 }
 
 /* Mobile devices */
@@ -50,3 +52,10 @@ html {
     font-style: normal;
 }
 
+.montecarlo-regular {
+    font-family: "MonteCarlo", cursive;
+    font-weight: 400;
+    font-style: normal;
+}
+
+

src/pages/Chat.jsx

@@ -1,8 +1,20 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 const Chat = () => {
+    const [interlocutorId, setInterlocutorId] = useState(0); // State to hold the interlocutorId
+
+    function getInterlocutorId() {
+      const id = localStorage.getItem('interlocutorId');
+      return id ? id : 0;
+    }
+
+    useEffect(() => {
+      const id = getInterlocutorId();
+      setInterlocutorId(id);
+    }, []);
+
   return (
-      <h2>Chat with ...</h2>
+      <h2>Chat with ... (id = {interlocutorId})</h2>
   );
 };
 

src/pages/Home.jsx

@@ -1,9 +1,69 @@
 import React from "react";
+import HomeTitle from "../components/home/HomeTitle.jsx";
+import ChatsList from "../components/home/ChatsList.jsx";
 
 const Home = () => {
-  return (
-      <div>
 
+    // temp for testing
+    const chats = [
+        {
+            name: "Alice Johnson",
+            id: 123456,
+            lastMessage: "See you later!"
+        },
+        {
+            name: "Bob Smith",
+            id: 654321,
+            lastMessage: "Got it, thanks!"
+        },
+        {
+            name: "Charlie Brown",
+            id: 234567,
+            lastMessage: "How's the project going? How's the project going? How's the project going?" +
+                "How's the project going? How's the project going?"
+        },
+        {
+            name: "David Clark",
+            id: 765432,
+            lastMessage: "I'll send the files."
+        },
+        {
+            name: "Eve Adams",
+            id: 345678,
+            lastMessage: "Let's meet tomorrow."
+        },
+        {
+            name: "Frank Wright",
+            id: 876543,
+            lastMessage: "Can you review this?"
+        },
+        {
+            name: "Grace Lee",
+            id: 456789,
+            lastMessage: "Thanks for your help!"
+        },
+        {
+            name: "Hannah Scott",
+            id: 987654,
+            lastMessage: "See you at the meeting."
+        },
+        {
+            name: "Ian Davis",
+            id: 567890,
+            lastMessage: "Let me know when you're free."
+        },
+        {
+            name: "Jill Thompson",
+            id: 678901,
+            lastMessage: "I'll catch up with you later."
+        }
+    ];
+
+    return (
+      <div className="homeWrapper">
+        <HomeTitle/>
+        <p>Your chats</p>
+        <ChatsList chats={chats} />
       </div>
   )
 }

src/pages/css/home.css

@@ -0,0 +1,25 @@
+.homeWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.homeWrapper p {
+    font-size: 2.5vw;
+    font-weight: 500;
+    margin-top: 0;
+}
+
+@media only screen and (max-width: 800px) {
+    .homeWrapper p {
+        font-size: 3vh;
+    }
+}
+
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}

src/pages/index.css

@@ -1 +1,2 @@
 @import url("css/init.css");
+@import url("css/home.css");