62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import React, { useState } 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)`
|
||
& > .jCXCIB {
|
||
border-bottom: none;
|
||
text-align: center;
|
||
& > .hMvvbb {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
`
|
||
|
||
const InfoDiv = styled.div`
|
||
box-sizing: border-box;
|
||
padding: 30px 26px;
|
||
/* width: calc(100% - 280px); */
|
||
margin-left: 2rem;
|
||
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
||
`
|
||
const UpBtn = styled(Button)`
|
||
width: 40%;
|
||
margin: 20px auto 0px auto;
|
||
border-radius: 50px;
|
||
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
|
||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||
border: none;
|
||
`
|
||
|
||
export default function BuyNftModal() {
|
||
const { t } = useTranslation()
|
||
|
||
const onDismiss = () => {
|
||
console.log('aaa')
|
||
}
|
||
return (
|
||
<ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
|
||
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
||
<Image src="/images/recommend/logo.svg" width={300} height={300} 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％" />
|
||
</InfoDiv>
|
||
</Flex>
|
||
|
||
<Flex>
|
||
<UpBtn>{t('Buy It Now')}</UpBtn>
|
||
</Flex>
|
||
</ModalDiv>
|
||
)
|
||
}
|