80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import React, { useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
|
|
import FlexCom from './FlexCom'
|
|
import HeaderMian from './HeaderMain'
|
|
|
|
const MainDiv = styled.div`
|
|
width: 60%;
|
|
`
|
|
const HeaderFlex = styled(Flex)`
|
|
padding-left: 20px;
|
|
`
|
|
|
|
const BuyButton = styled(Button)`
|
|
width: 150px;
|
|
border-radius: 50px;
|
|
margin-left: 20px;
|
|
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
|
|
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
|
`
|
|
|
|
const ContentFlex = styled(Flex)`
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 100%;
|
|
`
|
|
|
|
const InfoDiv = styled.div`
|
|
width: calc(50% - 40px);
|
|
margin: 0 20px;
|
|
/* width: 400px; */
|
|
min-width: 315px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
|
|
border-radius: 40px;
|
|
box-sizing: border-box;
|
|
margin-top: 50px;
|
|
padding: 0 30px 35px 30px;
|
|
`
|
|
const ButtonDiv = styled(Button)`
|
|
width: 100%;
|
|
margin: 20px auto 0px auto;
|
|
border-radius: 50px;
|
|
border: 1px solid ${({ theme }) => theme.colors.primaryDark};
|
|
color: ${({ theme }) => theme.colors.primaryDark};
|
|
`
|
|
export default function RegimentalCom() {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<MainDiv>
|
|
<HeaderFlex>
|
|
<Image src="/images/recommend/logo.svg" width={60} height={60} />
|
|
<BuyButton>{t('buy again')}</BuyButton>
|
|
</HeaderFlex>
|
|
<ContentFlex>
|
|
<InfoDiv>
|
|
<HeaderMian title={t('recommend')} />
|
|
<FlexCom name={t('The lower the number of')} value="100000(人)" />
|
|
<FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
|
|
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
|
|
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
|
|
<ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
|
|
{/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
|
|
</InfoDiv>
|
|
<InfoDiv>
|
|
<HeaderMian title={t('Regimental recommendation')} />
|
|
<FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
|
|
<FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
|
|
<FlexCom name={t('Number of secondary subordinates')} value="" />
|
|
<FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
|
|
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
|
|
<ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
|
|
{/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
|
|
</InfoDiv>
|
|
</ContentFlex>
|
|
</MainDiv>
|
|
)
|
|
}
|