82 lines
No EOL
2.5 KiB
TypeScript
82 lines
No EOL
2.5 KiB
TypeScript
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' }}
|
||
onClick={()=>setWorkModule(workSpaceNames[4])}
|
||
/>
|
||
</ButtonContainer>
|
||
</ButtonWrapper>
|
||
</Container>
|
||
</Wrapper>
|
||
)
|
||
} |