index.jsx 1.67 KB
Newer Older
Muhammadali's avatar
Muhammadali committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
import React from 'react'
import Block from "./style"
import Switch from '@mui/material/Switch';
import MiniTable from "../../MiniTable"
import {useColorConfig} from "../../../storage/globalColorConfig"
import Slider from '@mui/material/Slider';

const FixComponent = () => {


    const useColorConfigStore = useColorConfig((store) => store)

    const marks = [
        {
            value: 1,
Muhammadali's avatar
Muhammadali committed
16
            label: '0s',
Muhammadali's avatar
Muhammadali committed
17 18
        },
        {
Muhammadali's avatar
Muhammadali committed
19 20
            value: 50,
            label: '5s',
Muhammadali's avatar
Muhammadali committed
21 22 23
        },
        {
            value: 100,
Muhammadali's avatar
Muhammadali committed
24
            label: '10s',
Muhammadali's avatar
Muhammadali committed
25 26 27 28
        }
    ];


Muhammadali's avatar
Muhammadali committed
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
    const tableData = [
        {
            id: '1',
            title: 'Auto answer',
            type: 'row',
            child: useColorConfigStore.state.autoAnswer && <div style={{padding: '0 20px 0 5px'}}>
                <Slider
                    aria-label="Restricted values"
                    defaultValue={40}
                    step={null}
                    value={useColorConfigStore.state.autoAnswerSecond || true}
                    marks={marks}
                    onChange={(e) => useColorConfigStore.setColor({name: 'autoAnswerSecond', value: e.target.value})}
                />
            </div>,
            inputTag: <Switch
                size={'small'}
                checked={useColorConfigStore.state.autoAnswer}
                onChange={(e) => {
                    return useColorConfigStore.setColor({name: 'autoAnswer', value: e.target.checked})
                }}
Muhammadali's avatar
Muhammadali committed
50
            />,
Muhammadali's avatar
Muhammadali committed
51 52
        }
    ]
Muhammadali's avatar
Muhammadali committed
53 54

    return (<Block>
Muhammadali's avatar
Muhammadali committed
55 56 57 58
        {/*<p>Text</p>*/}
        {/*<Switch size={'small'} defaultChecked />*/}
        <MiniTable data={tableData}/>
    </Block>)
Muhammadali's avatar
Muhammadali committed
59 60 61
}

export default FixComponent