Rev 6992 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import styled from 'styled-components'
import SearchIcon from '@mui/icons-material/Search'
const StyledSearchBar = styled.div`
align-items: center;
background-color: #eef3f0;
border-radius: var(--border-radius);
color: gray;
cursor: pointer;
display: flex;
min-height: 1.5rem;
padding: 0.5rem;
width: -webkit-fill-available;
transition: all 0.2s;
input {
border: none;
outline: none;
background: none;
flex-grow: 1;
}
`
const SearchInput = ({ onChange, value, ...rest }) => {
return (
<StyledSearchBar {...rest}>
<SearchIcon />
<input
type="text"
placeholder="Search"
name="keyword"
onChange={onChange}
value={value}
/>
</StyledSearchBar>
)
}
export default SearchInput