76 lines
1.7 KiB
JavaScript
76 lines
1.7 KiB
JavaScript
/* eslint-disable react/forbid-component-props */
|
|
import styles from './Logo.module.css';
|
|
import { useStore } from '@/stores/hooks';
|
|
import getColors from '@/styles/colors';
|
|
import { min } from '@/styles/mq';
|
|
import { observer } from 'mobx-react-lite';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import logo from 'public/assets/images/logo-primary.svg';
|
|
import styled from 'styled-components';
|
|
import { Tag } from 'ui/elements';
|
|
import { Flex } from 'ui/grid';
|
|
|
|
const ImageWrapper = styled.div`
|
|
width: 100px;
|
|
|
|
${min('laptop')} {
|
|
width: 135px;
|
|
}
|
|
`;
|
|
|
|
const LogoText = styled.h3`
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-size: 0.85rem;
|
|
font-family: 'Montserrat';
|
|
font-weight: 500;
|
|
${min('laptop')} {
|
|
font-size: 1.2rem;
|
|
}
|
|
`;
|
|
|
|
const TagWrapper = styled.div`
|
|
font-family: 'Montserrat';
|
|
font-weight: 500;
|
|
|
|
${min('tablet')} {
|
|
margin: 0 5px;
|
|
}
|
|
`;
|
|
|
|
const { COLOR_PRIMARY } = getColors();
|
|
|
|
const UnlimitedTag = observer(() => {
|
|
const { $process } = useStore();
|
|
|
|
if ($process.has('Unlimited')) {
|
|
return (
|
|
<TagWrapper>
|
|
<Tag color={COLOR_PRIMARY}>без ограничений</Tag>
|
|
</TagWrapper>
|
|
);
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
function Logo() {
|
|
return (
|
|
<Flex flexDirection="column" alignItems="flex-start" justifyContent="space-between">
|
|
<ImageWrapper>
|
|
<Link href="/">
|
|
<Image priority className={styles.logo} alt="logo" src={logo} layout="responsive" />
|
|
</Link>
|
|
</ImageWrapper>
|
|
<Flex flexDirection={['column', 'row']} alignItems={[undefined, 'center']}>
|
|
<LogoText>Лизинговый Калькулятор</LogoText>
|
|
<UnlimitedTag />
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default Logo;
|