48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React, { useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import UnunitedCom from './components/UnunitedCom'
|
|
import ConnectedCom from './components/Connected'
|
|
import RegimentalCom from './components/Regimental'
|
|
|
|
const MainDiv = styled.div`
|
|
min-height: calc(100vh - 64px);
|
|
background-image: url('/images/recommend/bg.svg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`
|
|
|
|
const ContengDiv = 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%;
|
|
}
|
|
`
|
|
|
|
const Recommend: React.FC = () => {
|
|
// 邀请false普通邀请 true军团长邀请
|
|
const [type, typeState] = useState(false)
|
|
// 是否连接钱包
|
|
const [status, statusState] = useState(true)
|
|
|
|
return (
|
|
<MainDiv>
|
|
{type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
|
|
</MainDiv>
|
|
)
|
|
}
|
|
export default Recommend
|