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;
553 stevensc 8 
  border-radius: 20px;
172 stevensc 9 
  cursor: pointer;
10 
  display: flex;
11 
  min-height: 1.5rem;
12 
  padding: 0.5rem;
546 stevensc 13 
  gap: 5px;
904 stevensc 14 
  box-sizing: border-box;
963 stevensc 15 
  width: ${(props) => props.width || '100%'};
16 
  background-color: ${(props) =>
17 
    props.primary ? 'var(--bg-color)' : 'var(--bg-color-secondary)'};
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%;
969 stevensc 26 
    &,
27 
    &::placeholder {
28 
      color: var(--font-color);
29 
    }
172 stevensc 30 
  }
904 stevensc 31 
`
172 stevensc 32 
 
33 
const SearchInput = ({
904 stevensc 34 
  className = '',
172 stevensc 35 
  icon: Icon,
636 stevensc 36 
  errors = {},
904 stevensc 37 
  name = '',
38 
  type = 'text',
547 stevensc 39 
  onChange = () => {},
904 stevensc 40 
  placeholder = '',
963 stevensc 41 
  primary = true,
42 
  width,
616 stevensc 43 
  ...props
172 stevensc 44 
}) => {
45 
  return (
963 stevensc 46 
    <StyledInput className={className} primary={primary} width={width}>
172 stevensc 47 
      {Icon && <Icon />}
547 stevensc 48 
      <input
49 
        type={type}
50 
        name={name}
51 
        onChange={onChange}
52 
        placeholder={placeholder}
616 stevensc 53 
        {...props}
547 stevensc 54 
      />
55 
      {errors[name] && (
56 
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
57 
      )}
172 stevensc 58 
    </StyledInput>
904 stevensc 59 
  )
60 
}
172 stevensc 61 
 
904 stevensc 62 
export default SearchInput