You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.3 KiB
60 lines
2.3 KiB
import { XCircleIcon } from '@heroicons/react/outline';
|
|
import { SearchIcon } from '@heroicons/react/solid';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import useSearchInput from '../../../hooks/useSearchInput';
|
|
|
|
const messages = defineMessages({
|
|
searchPlaceholder: 'Search Movies & TV',
|
|
});
|
|
|
|
const SearchInput: React.FC = () => {
|
|
const intl = useIntl();
|
|
const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
|
|
return (
|
|
<div className="flex flex-1">
|
|
<div className="flex w-full">
|
|
<label htmlFor="search_field" className="sr-only">
|
|
Search
|
|
</label>
|
|
<div className="relative flex w-full items-center text-white focus-within:text-gray-200">
|
|
<div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
|
|
<SearchIcon className="h-5 w-5" />
|
|
</div>
|
|
<input
|
|
id="search_field"
|
|
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
|
|
className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
|
|
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
|
type="search"
|
|
value={searchValue}
|
|
onChange={(e) => setSearchValue(e.target.value)}
|
|
onFocus={() => setIsOpen(true)}
|
|
onBlur={() => {
|
|
if (searchValue === '') {
|
|
setIsOpen(false);
|
|
}
|
|
}}
|
|
onKeyUp={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
(e.target as HTMLInputElement).blur();
|
|
}
|
|
}}
|
|
/>
|
|
{searchValue.length > 0 && (
|
|
<button
|
|
className="absolute inset-y-0 right-2 m-auto h-7 w-7 border-none p-1 text-gray-400 outline-none transition hover:text-white focus:border-none focus:outline-none"
|
|
onClick={() => clear()}
|
|
>
|
|
<XCircleIcon className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchInput;
|