import { Typography } from 'antd' ; import React from 'react' ; import styled from 'styled-components' ; import { COLORS } from '../../theme/colors' ; const doAddonAlignment = ( alignAddon , left ) => { switch ( alignAddon ) { case 'left' : return left || '12%' ; case 'right' : return '88%' ; case undefined : return 0 ; default : return '50%' ; } } ; const TitleWithAddon = ( { children , level , alignAddon , left , bottom , transform , } ) : React . ReactElement => ( < TitleWrapper > { } < TitleWithAddonWrapperTitle alignAddon = { alignAddon } level = { level } left = { left } bottom = { bottom } transform = { transform } > { children } < /TitleWithAddonWrapperTitle> < /TitleWrapper>); const TitleWrapper = styled . div `
  position: relative;
` ; const TitleWithAddonWrapperTitle = styled ( Typography . Title ) `
  white-space: pre-line;
  text-align: ${ ( props ) => props . left || 'center' };
  :after {
    content: ' ';
    position: absolute;
    width: 40px;
    height: 6px;
    left: ${ ( props ) => doAddonAlignment ( props . alignAddon , props . left ) };
    bottom: ${ ( props ) => props . bottom || 0 };
    transform: ${ ( props ) => props . transform || 'translate(-50%, 0)' };
    background-color: ${ COLORS . highlight };
  }
` ; interface TitleWithAddonProps { children : React . ReactNode ; level : 1 | 2 | 3 | 4 ; alignAddon ? : string ; left ? : string ; bottom ? : string ; transform ? : string ; } export default TitleWithAddon ;