Настойки внешний вид

FRONT/DEV/src/components/settings/Settings.tsx

@@ -0,0 +1,125 @@
+// components/modalContainers/NoteDevice.tsx
+import { ModalContainer, ModalTitle, ModalContent, ButtonContainer } from "../modalwindows/style";
+import { MainButton } from "../UI/buttons/mainButton";
+import {useEffect, useMemo, useState} from "react";
+import styled from "styled-components";
+import {Setting, useSettingsStore} from "../../store/settingsStore";
+import {SettingItem} from "./SettingItem";
+import {IconComponent} from "../../const/buttons/icons";
+import {buttonNames} from "../../const/buttons/names";
+import {ModalMap} from "../modalwindows/windowsType";
+import Test from "./Test";
+import {workSpaceNames} from "../../const/workspace/names";
+
+interface Props {
+    onClose: () => void;
+}
+
+const SectionsSidebar = styled.ul`
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    flex-direction: column;
+    gap: 4px;
+    width: 20%;
+    min-width: 180px;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+`
+const SectionsBTN = styled.li`
+    font-size: 18px;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    padding:10px 16px;
+    box-sizing: border-box;
+    border-radius: 0 12px 12px 0;
+    &.active{
+        background-color: ${(props) => props.theme.accent};
+        color: ${props => props.theme.primary};
+    }
+`
+const SectionActive = styled.div`
+    width: 80%;
+`
+const SectionLine = styled.span`
+    height: 100%;
+    width: 1px;
+    background-color: #9D9D9D;
+`
+const CloseBtn = styled.span`
+    cursor: pointer;
+`
+
+export const Settings = ({onClose}: Props) => {
+    const {settings, activeSection, setActiveSection, initializeSettings} = useSettingsStore();
+
+    useEffect(() => {
+        initializeSettings();
+    }, [initializeSettings]);
+
+    const settingsBySection = useMemo(() => {
+        return settings.reduce((acc, setting) => {
+            if (!acc[setting.sectionId]) {
+                acc[setting.sectionId] = [];
+            }
+            acc[setting.sectionId].push(setting);
+            return acc;
+        }, {} as Record<string, Setting[]>);
+    }, [settings]);
+
+
+    const sections = Object.keys(settingsBySection);
+
+
+    useEffect(() => {
+        if (sections.length > 0 && !activeSection) {
+            setActiveSection(sections[0]);
+        }
+    }, [sections, activeSection, setActiveSection]);
+
+    return (
+        <ModalContainer style={{ height: '60vh', width: '50vw'}}>
+            <ModalTitle>
+                <h3>Настройки</h3>
+                <CloseBtn>
+                    <IconComponent name={buttonNames[12]} width="30" height="30" onClick={() => onClose()} />
+                </CloseBtn>
+            </ModalTitle>
+
+            <ModalContent style={{ display: 'flex', height:"100%", gap: '24px', padding:0 }}>
+                <SectionsSidebar>
+                    {sections.map((sectionId) => (
+                        <SectionsBTN
+                            key={sectionId}
+                            className={activeSection === sectionId ? 'active' : ''}
+                            onClick={()=>setActiveSection(sectionId)}
+                        >
+                            {sectionId}
+                        </SectionsBTN>
+                    ))}
+                </SectionsSidebar>
+                <SectionLine/>
+                <SectionActive>
+                    {activeSection && settingsBySection[activeSection] && (
+                        <>
+                            {settingsBySection[activeSection].map((setting)=>(
+                                <SettingItem setting={setting} key={setting.id}/>
+                            ))}
+                        </>
+                    )}
+                </SectionActive>
+            </ModalContent>
+
+            <ButtonContainer>
+                <MainButton
+                    type="button"
+                    size="small"
+                    title='Сохранить'
+                    onClick={onClose}
+                />
+            </ButtonContainer>
+        </ModalContainer>
+    );
+};