new-marketplace

1
'use client';
2

3
import { PrimeReactContext } from 'primereact/api';
4
import { Button } from 'primereact/button';
5
import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
6
import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
7
import { Sidebar } from 'primereact/sidebar';
8
import { classNames } from 'primereact/utils';
9
import React, { useContext, useEffect, useState } from 'react';
10
import { AppConfigProps, LayoutConfig, LayoutState } from '@/types';
11
import { LayoutContext } from './context/layoutcontext';
12

13
const AppConfig = (props: AppConfigProps) => {
14
    const [scales] = useState([12, 13, 14, 15, 16]);
15
    const { layoutConfig, setLayoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
16
    const { setRipple, changeTheme } = useContext(PrimeReactContext);
17

18
    const onConfigButtonClick = () => {
19
        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: true }));
20
    };
21

22
    const onConfigSidebarHide = () => {
23
        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: false }));
24
    };
25

26
    const changeInputStyle = (e: RadioButtonChangeEvent) => {
27
        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, inputStyle: e.value }));
28
    };
29

30
    const changeRipple = (e: InputSwitchChangeEvent) => {
31
        setRipple?.(e.value as boolean);
32
        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, ripple: e.value as boolean }));
33
    };
34

35
    const changeMenuMode = (e: RadioButtonChangeEvent) => {
36
        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, menuMode: e.value }));
37
    };
38

39
    const _changeTheme = (theme: string, colorScheme: string) => {
40
        changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
41
            setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
42
        });
43
    };
44

45
    const decrementScale = () => {
46
        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale - 1 }));
47
    };
48

49
    const incrementScale = () => {
50
        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale + 1 }));
51
    };
52

53
    const applyScale = () => {
54
        document.documentElement.style.fontSize = layoutConfig.scale + 'px';
55
    };
56

57
    useEffect(() => {
58
        applyScale();
59
        // eslint-disable-next-line react-hooks/exhaustive-deps
60
    }, [layoutConfig.scale]);
61

62
    return (
63
        <>
64
            <button className="layout-config-button config-link" type="button" onClick={onConfigButtonClick}>
65
                <i className="pi pi-cog"></i>
66
            </button>
67

68
            <Sidebar visible={layoutState.configSidebarVisible} onHide={onConfigSidebarHide} position="right" className="layout-config-sidebar w-20rem">
69
                {!props.simple && (
70
                    <>
71
                        <h5>Scale</h5>
72
                        <div className="flex align-items-center">
73
                            <Button icon="pi pi-minus" type="button" onClick={decrementScale} rounded text className="w-2rem h-2rem mr-2" disabled={layoutConfig.scale === scales[0]}></Button>
74
                            <div className="flex gap-2 align-items-center">
75
                                {scales.map((item) => {
76
                                    return <i className={classNames('pi pi-circle-fill', { 'text-primary-500': item === layoutConfig.scale, 'text-300': item !== layoutConfig.scale })} key={item}></i>;
77
                                })}
78
                            </div>
79
                            <Button icon="pi pi-plus" type="button" onClick={incrementScale} rounded text className="w-2rem h-2rem ml-2" disabled={layoutConfig.scale === scales[scales.length - 1]}></Button>
80
                        </div>
81

82
                        <h5>Menu Type</h5>
83
                        <div className="flex">
84
                            <div className="field-radiobutton flex-1">
85
                                <RadioButton name="menuMode" value={'static'} checked={layoutConfig.menuMode === 'static'} onChange={(e) => changeMenuMode(e)} inputId="mode1"></RadioButton>
86
                                <label htmlFor="mode1">Static</label>
87
                            </div>
88
                            <div className="field-radiobutton flex-1">
89
                                <RadioButton name="menuMode" value={'overlay'} checked={layoutConfig.menuMode === 'overlay'} onChange={(e) => changeMenuMode(e)} inputId="mode2"></RadioButton>
90
                                <label htmlFor="mode2">Overlay</label>
91
                            </div>
92
                        </div>
93

94
                        <h5>Input Style</h5>
95
                        <div className="flex">
96
                            <div className="field-radiobutton flex-1">
97
                                <RadioButton name="inputStyle" value={'outlined'} checked={layoutConfig.inputStyle === 'outlined'} onChange={(e) => changeInputStyle(e)} inputId="outlined_input"></RadioButton>
98
                                <label htmlFor="outlined_input">Outlined</label>
99
                            </div>
100
                            <div className="field-radiobutton flex-1">
101
                                <RadioButton name="inputStyle" value={'filled'} checked={layoutConfig.inputStyle === 'filled'} onChange={(e) => changeInputStyle(e)} inputId="filled_input"></RadioButton>
102
                                <label htmlFor="filled_input">Filled</label>
103
                            </div>
104
                        </div>
105

106
                        <h5>Ripple Effect</h5>
107
                        <InputSwitch checked={layoutConfig.ripple as boolean} onChange={(e) => changeRipple(e)}></InputSwitch>
108
                    </>
109
                )}
110
                <h5>PrimeOne Design</h5>
111
                <div className="grid">
112
                    <div className="col-3">
113
                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('lara-light-indigo', 'light')}>
114
                            <img src="/layout/images/themes/lara-light-indigo.png" className="w-2rem h-2rem" alt="Lara Light Indigo" />
115
                        </button>
116
                    </div>
117
                    
118
                    <div className="col-3">
119
                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('lara-dark-indigo', 'dark')}>
120
                            <img src="/layout/images/themes/lara-dark-indigo.png" className="w-2rem h-2rem" alt="Lara Dark Indigo" />
121
                        </button>
122
                    </div>
123
                    
124
                </div>
125
			</Sidebar>
126
        </>
127
    );
128
};
129

130
export default AppConfig;
131