68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import React, { useState, useEffect, useMemo, useRef } from 'react'
|
|
import dayjs from 'dayjs'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
|
|
|
|
interface ListProps {
|
|
title?: string
|
|
publishTime?: number
|
|
content?: string
|
|
close: () => void
|
|
}
|
|
|
|
const DetailDiv = styled.div`
|
|
width: 80%;
|
|
background: rgba(255, 255, 255);
|
|
border-radius: 20px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
padding: 40px 30px;
|
|
`
|
|
const HeaderFlex = styled(Flex)`
|
|
align-items: center;
|
|
cursor: pointer;
|
|
`
|
|
const TextBack = styled(Text)`
|
|
font-size: 18px;
|
|
color: #1fc7d4;
|
|
margin-left: 10px;
|
|
`
|
|
const HeadingText = styled(Heading)`
|
|
margin-top: 17px;
|
|
color: #333333;
|
|
font-size: 32px;
|
|
`
|
|
const TextTime = styled(Text)`
|
|
font-size: 14px;
|
|
color: #999999;
|
|
padding: 30px 0 20px 0;
|
|
border-bottom: 1px solid #e3e3e3;
|
|
`
|
|
const TextInfo = styled(Text)`
|
|
font-size: 14px;
|
|
color: #999999;
|
|
margin-top: 30px;
|
|
`
|
|
|
|
const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
|
|
const { t } = useTranslation()
|
|
const closeDetail = () => {
|
|
close()
|
|
}
|
|
return (
|
|
<>
|
|
<DetailDiv>
|
|
<HeaderFlex onClick={closeDetail}>
|
|
<Image src="/images/announcement/goback-icon.svg" alt="" width={12} height={20} />
|
|
<TextBack>{t('return')}</TextBack>
|
|
</HeaderFlex>
|
|
<HeadingText scale="xl">{title}</HeadingText>
|
|
<TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
|
|
<TextInfo>{content}</TextInfo>
|
|
</DetailDiv>
|
|
</>
|
|
)
|
|
}
|
|
export default Detail
|