burger-online

1
import {Tab} from '@ya.praktikum/react-developer-burger-ui-components'
2
import {useSelector} from 'react-redux'
3
import {useAppDispatch} from '../../hooks'
4
import {getCurrentTab, ingredientsStore} from '../../redux/ingredients/slice'
5
import {isBun, isMain, isSauce, tabBun, tabMain, tabSauce} from '../../utils/constants'
6
import styles from './tab-list.module.css'
7

8
const TabList = () => {
9
  const dispatch = useAppDispatch()
10
  const {currentTab} = useSelector(ingredientsStore)
11

12
  return (
13
    <div className={styles.tabLists}>
14
      <a className={styles.link} href={`#${isBun}`}>
15
        <Tab
16
          value={tabBun}
17
          active={currentTab === tabBun}
18
          onClick={value => dispatch(getCurrentTab(value))}
19
        >
20
          Булки
21
        </Tab>
22
      </a>
23

24
      <a className={styles.link} href={`#${isSauce}`}>
25
        <Tab
26
          value={tabSauce}
27
          active={currentTab === tabSauce}
28
          onClick={value => dispatch(getCurrentTab(value))}
29
        >
30
          Соусы
31
        </Tab>
32
      </a>
33

34
      <a className={styles.link} href={`#${isMain}`}>
35
        <Tab
36
          value={tabMain}
37
          active={currentTab === tabMain}
38
          onClick={value => dispatch(getCurrentTab(value))}
39
        >
40
          Начинки
41
        </Tab>
42
      </a>
43
    </div>
44
  )
45
}
46

47
export default TabList
48