103 lines
2.3 KiB
TypeScript
103 lines
2.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Text, Flex } from '@pancakeswap/uikit'
|
|
|
|
interface InfoProps {
|
|
title?: string
|
|
content?: string
|
|
publishTime?: string
|
|
top?: boolean
|
|
}
|
|
|
|
const FlexTable = styled(Flex)`
|
|
padding: 25px 0 20px 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #e3e3e3;
|
|
`
|
|
const TableInfo = styled.div`
|
|
width: 70%;
|
|
`
|
|
const FlexTitle = styled(Flex)`
|
|
font-size: 18px;
|
|
color: #333333;
|
|
align-items: center;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
font-size: 14px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
font-size: 18px;
|
|
}
|
|
`
|
|
const TextTitle = styled(Text)`
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #333333;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
max-width: 100px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
max-width: 747px;
|
|
}
|
|
`
|
|
const TextInfo = styled(Text)`
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
margin-top: 10px;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
font-size: 12px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
font-size: 14px;
|
|
}
|
|
`
|
|
const TextTime = styled(Text)`
|
|
font-size: 18px;
|
|
color: #999999;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
font-size: 14px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
font-size: 18px;
|
|
}
|
|
`
|
|
const TextTop = styled(Flex)`
|
|
margin-left: 10px;
|
|
width: 50px;
|
|
height: 25px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #eff4f5;
|
|
opacity: 0.75;
|
|
border-radius: 15px;
|
|
font-size: 12px;
|
|
color: #1fc7d4;
|
|
`
|
|
|
|
const ListItem: React.FC<InfoProps> = ({ title, content, publishTime, top = false }) => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<>
|
|
<FlexTable>
|
|
<TableInfo>
|
|
<FlexTitle>
|
|
<TextTitle>{title}</TextTitle>
|
|
{top ? <TextTop>{t('top')}</TextTop> : ''}
|
|
</FlexTitle>
|
|
<TextInfo>{content}</TextInfo>
|
|
</TableInfo>
|
|
<TextTime color="textSubtle">{publishTime?.split(' ')[0]}</TextTime>
|
|
</FlexTable>
|
|
</>
|
|
)
|
|
}
|
|
export default ListItem
|