return ( <div className="w-25 col-12 col-md-10 col-lg-8"> <div className="card card-sm"> <div className="card-body row p-0 ps-2 align-items-center"> <div className="col-auto pe-0 me-0"> <i className="bi-search" /> </div> <div className="col ms-0"> <input className="form-control border-0" type="search" value={props.search} placeholder="Search" onChange={(e) => props.update({ search: e.target.value })} /> </div> </div> </div> </div> ); <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/> </svg>