80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import React from 'react'
|
||
import styled from 'styled-components'
|
||
import { useTranslation } from 'contexts/Localization'
|
||
import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
|
||
import TextFlex from './TextFlex'
|
||
import FlexCom from './FlexCom'
|
||
|
||
const ModalDiv = styled(Modal)`
|
||
width: 80%;
|
||
|
||
${({ theme }) => theme.mediaQueries.xs} {
|
||
}
|
||
`
|
||
|
||
const InfoDiv = styled.div`
|
||
box-sizing: border-box;
|
||
padding: 30px 26px;
|
||
margin-left: 60px;
|
||
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
||
${({ theme }) => theme.mediaQueries.xs} {
|
||
padding: 20px 10px;
|
||
margin-left: 0;
|
||
}
|
||
${({ theme }) => theme.mediaQueries.lg} {
|
||
padding: 30px 26px;
|
||
margin-left: 60px;
|
||
}
|
||
`
|
||
const UpBtn = styled(Button)`
|
||
width: 50%;
|
||
margin: 20px auto 0px auto;
|
||
border-radius: 50px;
|
||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||
border: none;
|
||
`
|
||
const ImageDiv = styled(Image)`
|
||
width: 300px;
|
||
height: 300px;
|
||
margin-bottom: 20px;
|
||
${({ theme }) => theme.mediaQueries.xs} {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
${({ theme }) => theme.mediaQueries.lg} {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
`
|
||
|
||
const BuyNftModal: React.FC = () => {
|
||
const { t } = useTranslation()
|
||
|
||
// const onDismiss = () => {}
|
||
return (
|
||
<ModalDiv title={t('Buy commander NFT')}>
|
||
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
||
<ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
|
||
<InfoDiv>
|
||
<TextFlex
|
||
text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
|
||
color="#FEFDF1"
|
||
/>
|
||
<TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
|
||
<TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
|
||
<FlexCom name={t('First stage sharing ratio')} value="10％" />
|
||
<FlexCom name={t('Secondary split ratio')} value="5％" />
|
||
<FlexCom name={t('Contract address')} value={t('Contract address')} />
|
||
<FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
|
||
<FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
|
||
</InfoDiv>
|
||
</Flex>
|
||
|
||
<Flex>
|
||
<UpBtn>{t('Buy It Now')}</UpBtn>
|
||
</Flex>
|
||
</ModalDiv>
|
||
)
|
||
}
|
||
export default BuyNftModal
|