client/src/components/Search/Search.jsx

import React, { useContext } from 'react';
import "./Search.css";
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
import { ChatContext } from '../../contexts/ChatProvider';

function Search() {
    const { search, setSearch } = useContext(ChatContext);

    return (
        <div className='search'>
            <input type="text" placeholder='Search' className='search__input' value={search} onChange={e=>setSearch(e.target.value)} />
            <MagnifyingGlassIcon className='search__icon' color='black' />
        </div>
    )
}

export default Search