From 69d48df0fa5d99c029388c4bb741b0b630f7b388 Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Tue, 13 Jun 2023 00:21:52 +0200
Subject: [PATCH] input look for friends

---
 .../react/src/components/Messages/Chats.jsx   | 25 +++++++++++++++++--
 containers/react/src/styles/Messages.css      | 10 ++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx
index bf0bfdb3..6922509e 100644
--- a/containers/react/src/components/Messages/Chats.jsx
+++ b/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/>
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 96d437a2..5735f1b4 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -192,4 +192,14 @@ input{
 	align-items: center;
 	/* 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;
 }
\ No newline at end of file