91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import React, { useEffect } from 'react'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Flex, Text, useModal } from '@pancakeswap/uikit'
|
|
import SeriesDetail from './SeriesDetail'
|
|
|
|
interface DetailProp {
|
|
beginTime?: string
|
|
coverResource: coverResourceProps
|
|
endTime?: string
|
|
id?: string
|
|
name?: string
|
|
priceList?: priceProps[]
|
|
price?: any
|
|
purchased?: string | number
|
|
total?: string | number
|
|
type?: string
|
|
}
|
|
|
|
interface OperationProp {
|
|
detail: DetailProp
|
|
}
|
|
// interface listProps {
|
|
// beginTime?: string
|
|
// coverResource: coverResourceProps
|
|
// endTime?: string
|
|
// id?: string
|
|
// name?: string
|
|
// price: priceProps
|
|
// purchased?: string | number
|
|
// total?: string | number
|
|
// type?: string
|
|
// }
|
|
interface coverResourceProps {
|
|
path?: string
|
|
url?: string
|
|
}
|
|
interface priceProps {
|
|
label?: string
|
|
value?: string | number
|
|
}
|
|
|
|
const HeaderFlex = styled(Flex)`
|
|
margin-top: 25px;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
`
|
|
const TextKey = styled(Text)`
|
|
font-size: 22px;
|
|
color: #999999;
|
|
`
|
|
const TextVal = styled(Text)`
|
|
font-size: 22px;
|
|
color: #1fc7d4;
|
|
margin-left: 10px;
|
|
`
|
|
|
|
const TipFlex = styled(Flex)`
|
|
width: 35px;
|
|
height: 35px;
|
|
background: rgba(237, 231, 246, 0.39);
|
|
border: 1px solid rgba(255, 255, 255, 0.14901960784313725);
|
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #666666;
|
|
margin-right: 20px;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
`
|
|
|
|
const Header: React.FC<OperationProp> = ({ detail }) => {
|
|
const { t } = useTranslation()
|
|
const [onSeriesDetail] = useModal(<SeriesDetail detail={detail} />)
|
|
|
|
return (
|
|
<HeaderFlex>
|
|
<div />
|
|
<Flex>
|
|
<TextKey>{t('time remaining')}</TextKey>
|
|
<TextVal>{t('%hour%hour', { hour: 7 })}</TextVal>
|
|
</Flex>
|
|
<TipFlex onClick={onSeriesDetail}>?</TipFlex>
|
|
</HeaderFlex>
|
|
)
|
|
}
|
|
export default Header
|