69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
|
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>
|
|||
|
|
)
|
|||
|
|
}
|