ShowNext.jsx 1.43 KB
Newer Older
1
import React from "react";
2
import { Tab, Tabs } from "@material-ui/core";
3
import { useTranslation } from "react-i18next";
4
import { useStyles } from "../../styles";
5
6
7
8
9
10
11
12


export const ShowNext = (props) => {
    const [input, dispatch] = props.reducer;
    const { labels, area } = props;

    const { t, i18n } = useTranslation();

13
14
15
16
17
    const classes = useStyles();

    const handleChange = (event, newValue) => {
        dispatch({type: "UPDATE_INPUT", payload: {field: area, value: newValue}})
    };
18
19
20


    return (
21
        <div className={classes.tabsContainer}>
22
            {labels && <Tabs
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
                value={input[area]}
                onChange={handleChange}
                textColor="primary"
                //indicatorColor="primary"
                TabIndicatorProps={{
                    style: {
                        display: "none"
                    }
                }}
                variant="scrollable"
                scrollButtons="auto"
                aria-label={`${area} selection tabs`}
                className={classes.tabs}
            >
                {labels.map((label, idx) => <Tab
                        key={idx}
                        value={idx}
                        label={t(label)}
                        variant={"outlined"}
42
                        className={input[area] === idx ? classes.tabSelected : classes.tab}
43
44
                    />
                )}
45
            </Tabs>}
46
        </div>
47
48
    )
};