Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
904 stevensc 1
import React from 'react'
2
import styled from 'styled-components'
172 stevensc 3
 
904 stevensc 4
import FormErrorFeedback from './FormErrorFeedBack'
547 stevensc 5
 
172 stevensc 6
const StyledInput = styled.div`
7
  align-items: center;
547 stevensc 8
  background-color: rgb(238, 243, 240);
553 stevensc 9
  border-radius: 20px;
172 stevensc 10
  color: gray;
11
  cursor: pointer;
12
  display: flex;
13
  min-height: 1.5rem;
14
  padding: 0.5rem;
546 stevensc 15
  gap: 5px;
904 stevensc 16
  box-sizing: border-box;
17
  width: 100%;
546 stevensc 18
  svg {
19
    font-size: 1rem;
20
  }
172 stevensc 21
  input {
22
    border: none;
23
    outline: none;
24
    background: none;
189 stevensc 25
    width: 100%;
172 stevensc 26
  }
904 stevensc 27
`
172 stevensc 28
 
29
const SearchInput = ({
904 stevensc 30
  className = '',
172 stevensc 31
  icon: Icon,
636 stevensc 32
  errors = {},
904 stevensc 33
  name = '',
34
  type = 'text',
547 stevensc 35
  onChange = () => {},
904 stevensc 36
  placeholder = '',
616 stevensc 37
  ...props
172 stevensc 38
}) => {
39
  return (
174 stevensc 40
    <StyledInput className={className}>
172 stevensc 41
      {Icon && <Icon />}
547 stevensc 42
      <input
43
        type={type}
44
        name={name}
45
        onChange={onChange}
46
        placeholder={placeholder}
616 stevensc 47
        {...props}
547 stevensc 48
      />
49
      {errors[name] && (
50
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
51
      )}
172 stevensc 52
    </StyledInput>
904 stevensc 53
  )
54
}
172 stevensc 55
 
904 stevensc 56
export default SearchInput