seraching icon added

anwarjunaidkm · Apr 3, 2023 · 53fc848 · 53fc848
1 parent fced5bd
commit 53fc848
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Eventtyyyy</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -105,7 +105,7 @@ select:focus-visible {
   /* outline: 0; */
   /* background: none; */
   /* width: 10px; */
-  caret-color:transparent;
+  /* caret-color:transparent; */
   line-height: 40px;
   transition: width 0.4s linear; 
   background-color:#ffffff;
@@ -166,6 +166,7 @@ border: none;
  }
  .serch-li{
   padding: 2px;
+  padding-left: 8px;
  }
  .serch-li:hover{
   cursor: pointer;

diff --git a/src/components/banner/Banner.js b/src/components/banner/Banner.js
@@ -1,8 +1,9 @@
 import { display } from '@mui/system';
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Card, TabContainer } from 'react-bootstrap'
 import { Container } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { Col, Row } from 'reactstrap';
 import { searchingApi } from '../../store/user/UserSlice';
 import { c1, c2, c3 } from '../image/image';
@@ -14,25 +15,41 @@ function Banner() {
 
 
 
-    const [searchresult,setSerachresult] = useState([searchdata])
+
     const [search,setSerach] = useState()
+    const [searchresult,setSerachresult] = useState()
    const dispatch = useDispatch()
    const filterSearch =searchdata.results
    console.log("foundeed==",filterSearch)
+   console.log("foundeed222==",searchresult)
+
 
     const searchHandle = (e) => {
       setSerach({
         ...search,
         [e.target.name]: e.target.value
       })
+      dispatch(searchingApi(search))
+
+
 
     }
     const handleSubmit = (e) => {
       e.preventDefault(e);
       dispatch(searchingApi(search))
 
+
+
     }
 
+    useEffect(() => {
+
+      dispatch(searchingApi(search))
+
+
+    }, [search])
+
+
 
   return (
     <div className="banner">
@@ -73,6 +90,7 @@ function Banner() {
                         name="search"
                         placeholder="Search...."
                         onChange={searchHandle}
+
                       />
 
 
@@ -89,23 +107,38 @@ function Banner() {
                   </Card>
 
                     {/* //SMAPLE */}
-                  <div className='serach-result'>
+
+                    {filterSearch?.length >= 1 ?
+
+                    <div className='serach-result'>
 
                     <div className='child-search-result'>
 
 
-                      <ul  style={{padding:"0px"}}>
+                      {/* <ul  style={{padding:"0px"}}> */}
                         {
                           filterSearch?.map((item)=>{
                             return(
 
-                              <li className='serch-li'> {item?.account_view?.team_name}</li>
+
+                              <ul  style={{padding:"0px",margin:"10px" ,display:"flex"}}>
+                                <img style={{width:"30px", }} src={item.team_profilepic} alt=""  />
+                                <Link style={{ textDecoration: "none", color: "inherit" }}   to={`/singleview/${item?.id}/${item?.sub_catagory}/${item?.account}`}>  <li className='serch-li'> {item?.account_view?.team_name}</li> </Link>
+                              </ul>
                             )
                           })
                         }
-                      </ul>
-                      </div>
+                      {/* </ul> */}
                       </div>
+                      </div> : null
+
+
+
+
+
+
+                  }
+
 
                 </div>