Proyectos de Subversion LeadersLinked - SPA

import React from "react";
import styled from "styled-components";

import FormErrorFeedback from "./FormErrorFeedBack";

const StyledInput = styled.div`
  align-items: center;
  background-color: rgb(238, 243, 240);
  border-radius: 20px;
  color: gray;
  cursor: pointer;
  display: flex;
  min-height: 1.5rem;
  padding: 0.5rem;
  gap: 5px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  svg {
    font-size: 1rem;
  }
  input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
  }
`;

const SearchInput = ({
  className = "",
  icon: Icon,
  errors = {},
  name = "",
  type = "text",
  onChange = () => {},
  placeholder = "",
  ...props
}) => {
  return (
    <StyledInput className={className}>
      {Icon && <Icon />}
      <input
        type={type}
        name={name}
        onChange={onChange}
        placeholder={placeholder}
        {...props}
      />
      {errors[name] && (
        <FormErrorFeedback>{errors[name].message}</FormErrorFeedback>
      )}
    </StyledInput>
  );
};

export default SearchInput;