index.jsx 1.71 KB
Newer Older
Muhammadali's avatar
Muhammadali committed
1 2 3 4 5 6
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';
Muhammadali's avatar
Muhammadali committed
7
import { v4 as uuidv4 } from 'uuid'
Muhammadali's avatar
Muhammadali committed
8 9 10 11 12 13 14 15 16

const FixComponent = () => {


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

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


Muhammadali's avatar
Muhammadali committed
30 31
    const tableData = [
        {
Muhammadali's avatar
Muhammadali committed
32
            id: uuidv4(),
Muhammadali's avatar
Muhammadali committed
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
            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
51
            />,
Muhammadali's avatar
Muhammadali committed
52 53
        }
    ]
Muhammadali's avatar
Muhammadali committed
54 55

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

export default FixComponent