109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Text, Image, Button } from '@pancakeswap/uikit'
|
|
import FlexCom from './FlexCom'
|
|
import HeaderMain from './HeaderMain'
|
|
|
|
const ButtonDiv = styled(Button)`
|
|
width: 100%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
border: 1px solid ${({ theme }) => theme.colors.textDisabled};
|
|
color: ${({ theme }) => theme.colors.textDisabled};
|
|
`
|
|
|
|
const UpBtn = styled(Button)`
|
|
width: 100%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
|
border: none;
|
|
`
|
|
|
|
const FooterBtn = styled.div`
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
`
|
|
|
|
const ContentDiv = styled.div`
|
|
width: 60%;
|
|
background: rgba(255, 255, 255, 0.39);
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
|
border-radius: 40px;
|
|
|
|
${({ theme }) => theme.mediaQueries.sm} {
|
|
width: 60%;
|
|
}
|
|
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
width: 60%;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
width: 90%;
|
|
height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
`
|
|
|
|
const MainDiv = styled.div`
|
|
padding: 0 30px;
|
|
`
|
|
const FooterDiv = styled.div`
|
|
margin: 0 auto 30px auto;
|
|
`
|
|
const TextDiv = styled(Text)`
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
`
|
|
const LogoImage = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`
|
|
|
|
const RegimentalCom: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<ContentDiv>
|
|
<MainDiv>
|
|
<HeaderMain title={t('Regimental recommendation')} />
|
|
<LogoImage>
|
|
<Image src="/images/recommend/logo.svg" width={249} height={249} />
|
|
</LogoImage>
|
|
|
|
<>
|
|
<FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
|
|
<FlexCom
|
|
name={t('HCC total revenue percentage :10%')}
|
|
paddings="0 10px"
|
|
leftColor="textSubtle"
|
|
value="100000.00(HCC)"
|
|
/>
|
|
<FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
|
|
<FlexCom
|
|
name={t('HCC total revenue percentage :10%')}
|
|
paddings="0 10px"
|
|
leftColor="textSubtle"
|
|
value="100000.00(HCC)"
|
|
/>
|
|
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
|
|
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
|
|
</>
|
|
|
|
<FooterBtn>
|
|
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
|
|
{/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
|
|
</FooterBtn>
|
|
<FooterDiv>
|
|
<TextDiv color="textSubtle">{t('each time')}</TextDiv>
|
|
<TextDiv color="textSubtle">{t('last bid')}</TextDiv>
|
|
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
|
|
</FooterDiv>
|
|
</MainDiv>
|
|
</ContentDiv>
|
|
)
|
|
}
|
|
export default RegimentalCom
|