input look for friends

containers/react/src/components/Messages/Chats.jsx

@@ -15,7 +15,10 @@ import Message from "./Message"
 import { TbSend } from 'react-icons/tb';
 import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';
-import { GrAdd } from 'react-icons/gr'
+import { GrAdd } from 'react-icons/gr';
+
+import { Rank } from "../../DataBase/DataRank";
+import BasicAlert from "./Alert";
 
 
 const TouchDiv = styled.div`
@@ -220,10 +223,24 @@ function Chats(){
 		}
 	}
 
+	const [friend, setFriend] = useState("");
 	const [modalOpen, setModalOpen] = useState(false);
+	const [find, setFind] = useState(false);
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
 
+	const handleFriend = e => {
+		setFriend(e.target.value)
+	};
+
+	const findValue = () => {
+		setFind(false);
+		Rank.map((tab) => {
+			if (tab.name === friend)
+				setFind(true);
+		})
+	}; 
+	
 	// console.log(`data user1= ${user.username}`)
 
 	// while (user === null)
@@ -263,8 +280,12 @@ function Chats(){
       				)}
 	  			</span>
 				<div className="end">
+					<input className="lookForFriends" type="text" value={friend} onChange={handleFriend}/>
 					<TouchDiv>
-						<MdOutlineGroupAdd/>
+						<div  onClick={findValue}>
+							<MdOutlineGroupAdd/>
+							{find ? (<BasicAlert/>) : ("")}
+						</div>
 					</TouchDiv>
 					<TouchDiv>
 						<ImBlocked/>

containers/react/src/styles/Messages.css

@@ -193,3 +193,13 @@ input{
 	/* margin-left: 4px;
 	margin-right: 4px; */
 }
+
+.lookForFriends{
+	color: rgba(255, 255, 255, 0.5);;
+	backdrop-filter: sepia(90%);
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 4px;
+	width: 11rem;
+	height: 1.5rem;
+	margin-top: 1rem;
+}