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'
1301 stevensc 2 
import { Box } from '@mui/material'
904 stevensc 3 
import styled from 'styled-components'
172 stevensc 4 
 
1437 stevensc 5 
import FormErrorFeedback from './form/FormErrorFeedback'
547 stevensc 6 
 
1301 stevensc 7 
const StyledInput = styled(Box)`
172 stevensc 8 
  align-items: center;
553 stevensc 9 
  border-radius: 20px;
172 stevensc 10 
  cursor: pointer;
11 
  display: flex;
12 
  min-height: 1.5rem;
13 
  padding: 0.5rem;
546 stevensc 14 
  gap: 5px;
904 stevensc 15 
  box-sizing: border-box;
963 stevensc 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 
  name = '',
35 
  type = 'text',
1302 stevensc 36 
  placeholder = '',
547 stevensc 37 
  onChange = () => {},
1302 stevensc 38 
  icon: Icon,
39 
  error = '',
963 stevensc 40 
  primary = true,
616 stevensc 41 
  ...props
172 stevensc 42 
}) => {
43 
  return (
1302 stevensc 44 
    <StyledInput primary={primary} {...props}>
172 stevensc 45 
      {Icon && <Icon />}
547 stevensc 46 
      <input
47 
        type={type}
48 
        name={name}
49 
        onChange={onChange}
50 
        placeholder={placeholder}
51 
      />
1302 stevensc 52 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
172 stevensc 53 
    </StyledInput>
904 stevensc 54 
  )
55 
}
172 stevensc 56 
 
1304 stevensc 57 
export default SearchInput