129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
// DictsNavigatorPage.jsx
|
||
import { useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import styled from '@emotion/styled';
|
||
|
||
import { PageContainer } from '../StyledForPage';
|
||
import { HeaderSwitch } from '../../components/HeaderMenu/HeaderSwitch';
|
||
import { PrimaryButton } from '../../components/common/Buttons/Buttons';
|
||
import { TransitionSvg } from '../../components/common/icons/icons';
|
||
import { Stack } from '@mui/material';
|
||
|
||
// Styled components for the card
|
||
const CardsContainer = styled.div`
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.5rem;
|
||
`;
|
||
|
||
const Card = styled.div`
|
||
background: white;
|
||
border-radius: 0.75rem;
|
||
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 115rem;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
`;
|
||
|
||
const CardContent = styled.div`
|
||
padding: 2.5rem;
|
||
width: 51rem;
|
||
flex: 1;
|
||
`;
|
||
|
||
const CardTitle = styled.h2`
|
||
font-size: 1.13rem;
|
||
line-height: 150%;
|
||
color: #2d3748;
|
||
`;
|
||
|
||
const CardDescription = styled.p`
|
||
font-family: var(--font-family);
|
||
font-weight: 400;
|
||
font-size: 0.94rem;
|
||
line-height: 160%;
|
||
color: #4a5565;
|
||
margin-top: 0.7rem;
|
||
`;
|
||
|
||
const FeatureList = styled.ul`
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
`;
|
||
|
||
const FeatureItem = styled.li`
|
||
color: #4a5565;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.88rem;
|
||
line-height: 157%;
|
||
|
||
&:before {
|
||
content: '•';
|
||
color: #4a5565;
|
||
font-weight: bold;
|
||
font-size: 1rem;
|
||
}
|
||
`;
|
||
|
||
function DictsNavigatorPage() {
|
||
const navigate = useNavigate();
|
||
|
||
const handleNavigateToVSP = () => {
|
||
navigate('/dicts/dict-vsp');
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<HeaderSwitch />
|
||
<PageContainer>
|
||
<CardsContainer>
|
||
<Card>
|
||
<CardContent>
|
||
<CardTitle>Справочник объектов ВСП</CardTitle>
|
||
<CardDescription>
|
||
Централизованное управление данными о внутренних структурных
|
||
подразделениях. Ведите учет регистрационных номеров, адресов,
|
||
дат открытия, форм расположения и штатной численности всех ВСП
|
||
организации.
|
||
</CardDescription>
|
||
<FeatureList>
|
||
<FeatureItem>
|
||
Добавление и редактирование записей об объектах
|
||
</FeatureItem>
|
||
<FeatureItem>Отслеживание метаданных филиалов</FeatureItem>
|
||
<FeatureItem>
|
||
Удобная табличная форма представления данных
|
||
</FeatureItem>
|
||
</FeatureList>
|
||
<PrimaryButton height={'2.75rem'} onClick={handleNavigateToVSP}>
|
||
<Stack
|
||
sx={{
|
||
spacing: '.25rem',
|
||
direction: 'row',
|
||
alignItems: 'center',
|
||
}}
|
||
|
||
>
|
||
<TransitionSvg />
|
||
<p>Открыть справочник объектов</p>
|
||
</Stack>
|
||
</PrimaryButton>
|
||
</CardContent>
|
||
</Card>
|
||
</CardsContainer>
|
||
</PageContainer>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default DictsNavigatorPage;
|