59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import dayjs from 'dayjs'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Text, Flex } from '@pancakeswap/uikit'
|
|
|
|
const TimeText = styled(Text)`
|
|
color: #7a6eaa;
|
|
font-size: 18px;
|
|
`
|
|
const TimeFlex = styled(Flex)`
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
flex-direction: column;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
flex-direction: row;
|
|
}
|
|
`
|
|
|
|
interface RoundDetailProps {
|
|
beginTime?: number
|
|
endTime?: number
|
|
price?: number
|
|
remaining?: number
|
|
token?: string
|
|
total?: number
|
|
}
|
|
interface HeaderStatusProps {
|
|
status?: string
|
|
roundDetail?: RoundDetailProps
|
|
}
|
|
|
|
const HeaderStatus: React.FC<HeaderStatusProps> = ({ status, roundDetail }) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<TimeText>
|
|
{/* {status === 'close' && t('Exchange closed')} */}
|
|
{status === 'none' && t('Exchange not commenced')}
|
|
|
|
{status === 'proceed' && (
|
|
<TimeFlex>
|
|
{dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}
|
|
<Text> ~ </Text>
|
|
{dayjs(roundDetail?.endTime).format('YYYY-MM-DD HH:mm:ss')}
|
|
</TimeFlex>
|
|
)}
|
|
|
|
{status === 'end' &&
|
|
`${t('Opening time of next exchange period:')}${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}`}
|
|
</TimeText>
|
|
)
|
|
}
|
|
|
|
export default HeaderStatus
|