All files / src/components/Search index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
 
 
 
 
4x
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import { SvgIcon } from '../SvgIcon';
import { useTranslation } from 'react-i18next';
import { getQueryParam, removeQueryParam, setQueryParam } from '../../helpers';
import { Tab, Tabs } from '../Tabs';
 
const styles = require('./Search.module.css');
 
export const Search: FC = () => {
  const { t } = useTranslation();
  const [query, setQuery] = useState('');
  const firstTime = useRef(true);
  const [tab, setTab] = useState<1 | 2 | 3>(1);
 
  useEffect(() => {
    setQuery(getQueryParam('q') ?? '');
  }, []);
 
  useEffect(() => {
    if (!firstTime.current) {
      query ? setQueryParam('q', query) : removeQueryParam('q');
    }
    firstTime.current = false;
  }, [query]);
 
  const inputHandler = useCallback((evt) => {
    setQuery(evt.target.value);
  }, []);
 
  return <div className={styles.Search}>
    <div className={styles.SearchInput}>
      <SvgIcon icon={{ name: 'search', width: 16, height: 16, fill: '#144154' }} />
      <input
        type="text"
        value={query}
        onInput={inputHandler}
        placeholder={t('search')}
        autoFocus={true}
      />
    </div>
 
    <div className={styles.SearchResults}>
      <Tabs classes={styles.SearchResultsTabs} fullWidth={false}>
        <Tab current={tab === 1} onClick={() => setTab(1)}>{t('explore')}</Tab>
        <Tab current={tab === 2} onClick={() => setTab(2)}>{t('shop')}</Tab>
        <Tab current={tab === 3} onClick={() => setTab(3)}>{t('support')}</Tab>
      </Tabs>
 
      <div className={`${styles.SearchResultsContent} ${tab === 1 ? styles.show : styles.hide}`}>
        0 {t('results')}
      </div>
      <div className={`${styles.SearchResultsContent} ${tab === 2 ? styles.show : styles.hide}`}>
        0 {t('results')}
      </div>
      <div className={`${styles.SearchResultsContent} ${tab === 3 ? styles.show : styles.hide}`}>
        0 {t('results')}
      </div>
      Use the tabs above to see more results or try another search term.
    </div>
  </div>;
};