Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
616 stevensc 1 
import React from "react";
2 
import styled from "styled-components";
172 stevensc 3 
 
616 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;
543 stevensc 16 
  width: -moz-available;
172 stevensc 17 
  width: -webkit-fill-available;
543 stevensc 18 
  width: fill-available;
546 stevensc 19 
  svg {
20 
    font-size: 1rem;
21 
  }
172 stevensc 22 
  input {
23 
    border: none;
24 
    outline: none;
25 
    background: none;
189 stevensc 26 
    width: 100%;
172 stevensc 27 
  }
616 stevensc 28 
`;
172 stevensc 29 
 
30 
const SearchInput = ({
636 stevensc 31 
  className = "",
172 stevensc 32 
  icon: Icon,
636 stevensc 33 
  errors = {},
616 stevensc 34 
  name = "",
636 stevensc 35 
  type = "text",
547 stevensc 36 
  onChange = () => {},
616 stevensc 37 
  placeholder = "",
38 
  ...props
172 stevensc 39 
}) => {
40 
  return (
174 stevensc 41 
    <StyledInput className={className}>
172 stevensc 42 
      {Icon && <Icon />}
547 stevensc 43 
      <input
44 
        type={type}
45 
        name={name}
46 
        onChange={onChange}
47 
        placeholder={placeholder}
616 stevensc 48 
        {...props}
547 stevensc 49 
      />
50 
      {errors[name] && (
51 
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
52 
      )}
172 stevensc 53 
    </StyledInput>
616 stevensc 54 
  );
55 
};
172 stevensc 56 
 
616 stevensc 57 
export default SearchInput;