// @ts-nocheck import styled from 'styled-components' import logoImg from '../assets/images/logo.png' import colorLogoImg from '../assets/images/logo_color.png' import clsx from 'clsx' export default function Logo (props) { const { active = false } = props return (<Wrapper> <Image className={clsx({ active: active })} image={ active ? colorLogoImg : logoImg} /> <TitleWrap> <Title type='main'>SWLab</Title> <Title type='sub'>Bankware Global</Title> </TitleWrap> </Wrapper>) } const Image = styled.div` margin-top: 10px; margin-right: 6px; width: 35px; height: 44px; background-image: url(${props => props.image}); background-size: contain; background-repeat: no-repeat; &.active { width: 52px; height: 52px; } ` const Wrapper = styled.div` display: flex; align-items: center; flex-grow: 1; width: 300px; height: 60px; margin-top: -8px; ` const TitleWrap = styled.div` display: flex; flex-direction: column; ` const Title = styled.span` font-size: ${(props) => (props.type === 'main' ? '33px' : '14px')}; font-weight: ${(props) => (props.type === 'main' ? 600 : 400)}; margin-top: ${(props) => (props.type !== 'main' && '-4px')} `