29 lines
855 B
TypeScript
29 lines
855 B
TypeScript
import React, { forwardRef } from 'react';
|
|
import classNames from 'classnames/bind';
|
|
|
|
import styles from './SearchBar.module.scss';
|
|
import SearchIcon from '@images/icons/ic-search.svg';
|
|
|
|
const cn = classNames.bind(styles);
|
|
|
|
interface Props {
|
|
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
placeholderText: string;
|
|
}
|
|
|
|
const SearchBar = forwardRef<HTMLInputElement, Props>(({ onClick, onKeyDown, placeholderText }, ref) => {
|
|
return (
|
|
<form name="searchForm" className={cn('search-form')}>
|
|
<button onClick={onClick}>
|
|
<img src={SearchIcon} alt="SearchIcon" />
|
|
</button>
|
|
<input type="search" onKeyDown={onKeyDown} placeholder={placeholderText} ref={ref} defaultValue="" />
|
|
</form>
|
|
);
|
|
});
|
|
|
|
SearchBar.displayName = 'SearchBar';
|
|
|
|
export default SearchBar;
|