function SearchInput()

in src/components/Search/SearchInput.tsx [20:70]

• 35 lines of code
• 2 McCabe index (conditional complexity)

function SearchInput({
  onFocus,
  compact,
  inputPlaceholder,
  searchType,
  searchError,
  onChange,
}: SearchInputProps) {
  const mode = useAppSelector((state) => state.theme.mode);
  const size = compact ? 'small' : undefined;

  const styles = {
    container: style({
      $nest: {
        '.hide': {
          visibility: 'hidden',
        },
        '.search-text-field': {
          width: '100%',
        },
        '.MuiInputBase-root': {
          ...(mode == 'light' ? InputStylesRaw.Light : InputStylesRaw.Dark),
          flexDirection: 'row',
        },
      },
    }),
  };

  return (
    <FormControl className={styles.container} fullWidth>
      <TextField
        error={Boolean(searchError)}
        helperText={searchError}
        placeholder={inputPlaceholder}
        inputProps={{ 'aria-label': inputPlaceholder }}
        id={`search-${searchType}-input`}
        onFocus={onFocus}
        onChange={(e) => onChange(e.currentTarget.value)}
        size={size}
        className={`search-text-field ${searchType}`}
        InputProps={{
          startAdornment: (
            <InputAdornment position='end'>
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />
    </FormControl>
  );
}