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'
1581 stevensc 2 
import { Box, styled } from '@mui/material'
172 stevensc 3 
 
1437 stevensc 4 
import FormErrorFeedback from './form/FormErrorFeedback'
547 stevensc 5 
 
1301 stevensc 6 
const StyledInput = styled(Box)`
172 stevensc 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 
  background-color: ${(props) =>
16 
    props.primary ? 'var(--bg-color)' : 'var(--bg-color-secondary)'};
546 stevensc 17 
  svg {
18 
    font-size: 1rem;
19 
  }
172 stevensc 20 
  input {
21 
    border: none;
22 
    outline: none;
23 
    background: none;
189 stevensc 24 
    width: 100%;
969 stevensc 25 
    &,
26 
    &::placeholder {
27 
      color: var(--font-color);
28 
    }
172 stevensc 29 
  }
904 stevensc 30 
`
172 stevensc 31 
 
32 
const SearchInput = ({
904 stevensc 33 
  name = '',
34 
  type = 'text',
1302 stevensc 35 
  placeholder = '',
547 stevensc 36 
  onChange = () => {},
1302 stevensc 37 
  icon: Icon,
38 
  error = '',
963 stevensc 39 
  primary = true,
1615 stevensc 40 
  value,
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}
1613 stevensc 51 
        value={value}
547 stevensc 52 
      />
1302 stevensc 53 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
172 stevensc 54 
    </StyledInput>
904 stevensc 55 
  )
56 
}
172 stevensc 57 
 
1304 stevensc 58 
export default SearchInput