64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { Box, Button, Heading, HStack, Divider, Flex } from '@chakra-ui/react';
|
||
import React from 'react';
|
||
import { useLocation, Link } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
import { URLs } from '../../__data__/urls';
|
||
|
||
const Header = () => {
|
||
const location = useLocation();
|
||
const isActive = (keyword: string) => location.pathname.includes(keyword);
|
||
|
||
const { t } = useTranslation('~', {
|
||
keyPrefix: 'dry-wash.arm.master.sideBar',
|
||
});
|
||
|
||
return (
|
||
<Box as='header' bg='gray.50' boxShadow='md' px={6} py={4} w='100%'>
|
||
<Flex gap={50} align='center'>
|
||
<Heading color='green' size='lg'>
|
||
{t('title')}
|
||
</Heading>
|
||
<HStack spacing={4}>
|
||
{URLs.armOrder.isOn && (
|
||
<Button
|
||
as={Link}
|
||
to={URLs.armOrder.url}
|
||
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
|
||
variant={isActive(URLs.armOrder.url) ? 'outline' : 'ghost'}
|
||
>
|
||
{t('orders')}
|
||
</Button>
|
||
)}
|
||
<Divider orientation='vertical' height='30px' />
|
||
{URLs.armMaster.isOn && (
|
||
<Button
|
||
as={Link}
|
||
to={URLs.armMaster.url}
|
||
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
|
||
variant={isActive(URLs.armMaster.url) ? 'outline' : 'ghost'}
|
||
data-testid='master-button'
|
||
>
|
||
{t('master')}
|
||
</Button>
|
||
)}
|
||
|
||
{URLs.armMap.isOn && (
|
||
<Button
|
||
as={Link}
|
||
to={URLs.armMap.url}
|
||
colorScheme={isActive(URLs.armMap.url) ? 'green' : 'blue'}
|
||
variant={isActive(URLs.armMap.url) ? 'outline' : 'ghost'}
|
||
data-testid='master-button'
|
||
>
|
||
Карта заказов
|
||
</Button>
|
||
)}
|
||
</HStack>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default Header;
|