Инициализация в новом репозитории

FRONT/DEV/src/components/workSpace/modules/appModules/about.tsx

@@ -0,0 +1,69 @@
+import styled from "styled-components"
+import { useNavigate } from "react-router-dom"
+
+const Container = styled.div`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 25px;
+    text-align: center;
+
+    h1, h2, h3, p{
+        margin: 0;
+    } 
+`
+
+const Content = styled.div`
+    max-width: 450px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 100px;
+    button{
+        width: 250px;
+    }
+`
+
+const Row = styled.div`
+    display: flex;
+    gap: 10px;
+    align-items: flex-end;
+    justify-content: center;
+    margin-left: 50px;
+`
+
+const Column = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+`
+
+export default function About() {
+    const navigate = useNavigate()
+    const redirect = (path: string) => {
+        navigate(path)
+    }
+
+
+    return (
+        <Container>
+            <Content>
+                <Row>
+                    <h1>GoNetMan</h1>
+                    <p>v 0.0.1</p>
+                </Row>
+
+                <Column>
+                    <h3>О программе</h3>
+                    GoNetMan - Это приложение представляющее собой панель управления сетевыми настройками в удобном и понятном графическом виде.
+                </Column>
+
+                <p>Copyright © ООО "Гибридные офисные системы"</p>
+
+                <button onClick={()=>redirect('/')}>В меню</button>
+            </Content>
+        </Container>
+    )
+}

FRONT/DEV/src/components/workSpace/modules/appModules/header.tsx

@@ -0,0 +1,46 @@
+import styled from "styled-components"
+import { IconComponent } from "../../../../const/buttons/icons"
+import { buttonNames } from "../../../../const/buttons/names"
+import { useWorkSpaceStore } from "../../../../store"
+import { useModalContext } from "../../../../store"
+import { useAdminStore } from "../../../../store/adminStore"
+import { ModalMap } from "../../../modalwindows/windowsType"
+import { QuitButton } from "../../../UI/buttons/quitButton"
+import { usePosStore } from "../../../../store/posStore"
+
+const Container = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: ${(props) => props.theme.primary};
+    padding: 0 5px;
+`
+
+const ButtonContainer = styled.div`
+    display: flex;
+    align-items: center;
+`
+
+const IconContainer = styled.div`
+    padding: 10px;
+    
+    svg{
+        cursor: pointer;
+    }
+`
+
+export const Header = () => {
+    const {setNullPos} = usePosStore()
+
+    return (
+        <Container>
+            <ButtonContainer>
+                <IconContainer>
+                    <IconComponent name={buttonNames[11]} width="30" height="30" onClick={()=>setNullPos(true)}/>
+                </IconContainer>
+
+                <QuitButton size="small"/>
+            </ButtonContainer>
+        </Container>
+    )
+}

FRONT/DEV/src/components/workSpace/modules/appModules/helloWindow.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components"
+import { MainButton } from "../../../UI/buttons/mainButton"
+import { useWorkSpaceStore } from "../../../../store"
+import { workSpaceNames } from "../../../../const/workspace/names"
+import { buttonNames } from "../../../../const/buttons/names"
+
+const Wrapper = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${(props => props.theme.background)};
+    background-image: url('./assets/images/back1.svg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: bottom;
+`
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 52px;
+    margin-bottom: 100px;
+`
+
+const ButtonWrapper = styled.div`
+    display: flex; 
+    gap: 75px;
+    flex-direction: column;
+`
+
+const ButtonContainer = styled.div`
+    display: flex; 
+    gap: 15px;
+    flex-direction: column;
+`
+
+const Title = styled.div`
+    display: flex;
+    align-items: flex-end;
+    gap: 10px;
+
+    h1{
+        font-size: 52px;
+    }
+`
+
+export const HelloWindow = () => {
+
+    const { setWorkModule } = useWorkSpaceStore()
+
+    return (
+        <Wrapper>
+            <Container className="unselectable">
+                <Title>
+                    <img src="./assets/images/logo.svg" alt="" style={{width: '152px'}}/>
+                </Title>
+
+
+                <ButtonWrapper>
+                    <ButtonContainer>
+                        <MainButton 
+                            title="Настройки сети" 
+                            icon={buttonNames[3]} 
+                            iconSize={{ width: '32', height: '32' }}  
+                            onClick={() => setWorkModule(workSpaceNames[3])} 
+                        />
+                        <MainButton 
+                            title="О программе" 
+                            icon={buttonNames[4]} 
+                            iconSize={{ width: '32', height: '32' }}  
+                        />
+                    </ButtonContainer>
+                </ButtonWrapper>
+            </Container>
+        </Wrapper>
+    )
+}