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 = ({
616 stevensc 31 
  type = "text",
172 stevensc 32 
  icon: Icon,
616 stevensc 33 
  name = "",
34 
  value = "",
547 stevensc 35 
  ref = null,
36 
  errors = {},
616 stevensc 37 
  className = "",
547 stevensc 38 
  onChange = () => {},
616 stevensc 39 
  placeholder = "",
40 
  ...props
172 stevensc 41 
}) => {
42 
  return (
174 stevensc 43 
    <StyledInput className={className}>
172 stevensc 44 
      {Icon && <Icon />}
547 stevensc 45 
      <input
46 
        type={type}
47 
        name={name}
48 
        onChange={onChange}
49 
        ref={ref}
50 
        placeholder={placeholder}
51 
        defaultValue={value}
616 stevensc 52 
        {...props}
547 stevensc 53 
      />
54 
      {errors[name] && (
55 
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
56 
      )}
172 stevensc 57 
    </StyledInput>
616 stevensc 58 
  );
59 
};
172 stevensc 60 
 
616 stevensc 61 
export default SearchInput;