1. import { MagnifyingGlass } from 'phosphor-react'
2. import { SearchFormContainer } from './styles'
3. import { useForm } from 'react-hook-form'
4. import * as z from 'zod'
5. import { zodResolver } from '@hookform/resolvers/zod'
6. import { useContext } from 'react'
7. import { TransactionsContext } from '../../contexts/TransactionsContext'
8.  
9. const searchFormSchema = z.object({
10.   query: z.string(),
11. })
12.  
13. type SearchFormInputs = z.infer<typeof searchFormSchema>
14.  
15. export function SearchForm() {
16.   const { getTransactions } = useContext(TransactionsContext)
17.  
18.   const {
19.     register,
20.     handleSubmit,
21.     formState: { isSubmitting },
22.   } = useForm<SearchFormInputs>({
23.     resolver: zodResolver(searchFormSchema),
24.   })
25.  
26.   async function handleSearchTransactions(data: SearchFormInputs) {
27.     await getTransactions(data.query)
28.   }
29.  
30.   return (
31.     <SearchFormContainer >
32.       &lt;input
33.         type='text'
34.         placeholder='Pesquisar transações'
35.         {...register(`query`)}
36.       /&gt;
37.       <button type='submit' disabled={isSubmitting}>
38.         <MagnifyingGlass size={20} />
39.         Buscar
40.       </button>
41.     </SearchFormContainer>
42.   )
43. }
44.