refactor: new Profile UI

src/common/component/Profile.js

@@ -1,24 +1,21 @@
 // import React from "react";
-// import toast from "react-hot-toast";
-// import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
-import { BsChatText } from "react-icons/bs";
-// import { RiUserAddLine } from "react-icons/ri";
-// import { IoShareOutline } from "react-icons/io5";
 import styled from "styled-components";
-
+import IconMessage from "../../assets/icons/message.svg";
+import IconCall from "../../assets/icons/call.svg";
+import IconMore from "../../assets/icons/more.svg";
 import Avatar from "../../common/component/Avatar";
+import toast from "react-hot-toast";
 
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   margin-top: 80px;
   width: 432px;
   gap: 4px;
-
   .avatar {
     width: 80px;
     height: 80px;
@@ -36,14 +33,43 @@ const StyledWrapper = styled.div`
     font-weight: normal;
     font-size: 14px;
     line-height: 20px;
-    color: #78787c;
+    color: #98a2b3;
+  }
+  .intro {
+    color: #344054;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
   }
   .icons {
+    margin-top: 24px;
     display: flex;
     align-items: center;
-    padding: 26px 0;
-    gap: 28px;
+    gap: 8px;
     .icon {
+      cursor: pointer;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #22ccee;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 4px;
+      background: #f9fafb;
+      border-radius: 8px;
+      width: 128px;
+      padding: 14px 0 12px 0;
+      &:hover {
+        background: #f2f4f7;
+      }
+      &.call,
+      &.more {
+        svg path {
+          fill: #22ccee;
+        }
+      }
     }
   }
   .line {
@@ -54,7 +80,7 @@ const StyledWrapper = styled.div`
   }
   &.card {
     padding: 16px;
-    width: 332px;
+    width: 280px;
     background: #ffffff;
     box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
       0px 10px 10px rgba(31, 41, 55, 0.04);
@@ -68,28 +94,40 @@ export default function Profile({ uid = null, type = "embed" }) {
   const data = useSelector((store) => store.contacts.byId[uid]);
   if (!data) return null;
   // console.log("profile", data);
-  const { name, email, avatar } = data;
+  const {
+    name,
+    email,
+    avatar,
+    introduction = "This guy has nothing to introduce",
+  } = data;
+  const handleClick = () => {
+    toast.success("cooming soon...");
+  };
   return (
     <StyledWrapper className={type}>
       <Avatar className="avatar" url={avatar} name={name} />
       <h2 className="name">{name}</h2>
       <span className="email">{email}</span>
+      <p className="intro">{introduction}</p>
       <ul className="icons">
-        <li className="icon chat">
-          <NavLink to={`/chat/dm/${uid}`}>
-            <BsChatText size={20} color="#616161" />
-          </NavLink>
+        <NavLink to={`/chat/dm/${uid}`}>
+          <li className="icon chat">
+            <IconMessage />
+            <span className="txt">Message</span>
+          </li>
+        </NavLink>
+        {/* <NavLink to={`#`}> */}
+        {type !== "card" && (
+          <li className="icon call" onClick={handleClick}>
+            <IconCall />
+            <span className="txt">Call</span>
+          </li>
+        )}
+        {/* </NavLink> */}
+        <li className="icon more" onClick={handleClick}>
+          <IconMore />
+          <span className="txt">More</span>
         </li>
-        {/* <li className="icon add">
-          <NavLink to={`/chat/dm/${uid}`}>
-          <RiUserAddLine size={20} color="#616161" />
-          </NavLink>
-        </li>
-        <li className="icon share">
-          <NavLink to={`/chat/dm/${uid}`}>
-          <IoShareOutline size={20} color="#616161" />
-          </NavLink>
-        </li> */}
       </ul>
       {/* {type == "embed" && <hr className="line" />} */}
     </StyledWrapper>