aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/SearchForm/SearchForm.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/SearchForm/SearchForm.tsx')
-rw-r--r--src/components/SearchForm/SearchForm.tsx30
1 files changed, 19 insertions, 11 deletions
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index e37ba9e..c1a7ca7 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -1,8 +1,10 @@
import { ButtonSubmit } from '@components/Buttons';
import { Form, Input } from '@components/Form';
+import { SearchIcon } from '@components/Icons';
import { t } from '@lingui/macro';
import { useRouter } from 'next/router';
import { FormEvent, useEffect, useRef, useState } from 'react';
+import styles from './SearchForm.module.scss';
const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
const [query, setQuery] = useState('');
@@ -24,17 +26,23 @@ const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
};
return (
- <Form submitHandler={launchSearch} modifier="search">
- <Input
- ref={inputRef}
- id="search-query"
- name="search-query"
- type="search"
- value={query}
- setValue={setQuery}
- />
- <ButtonSubmit>{t`Search`}</ButtonSubmit>
- </Form>
+ <>
+ <div className={styles.title}>{t`Search`}</div>
+ <Form submitHandler={launchSearch} modifier="search">
+ <Input
+ ref={inputRef}
+ id="search-query"
+ name="search-query"
+ type="search"
+ value={query}
+ setValue={setQuery}
+ />
+ <ButtonSubmit modifier="search">
+ <SearchIcon />
+ <span className="screen-reader-text">{t`Search`}</span>
+ </ButtonSubmit>
+ </Form>
+ </>
);
};