154 lines
3.3 KiB
TypeScript
154 lines
3.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
import styled from 'styled-components'
|
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
|
|
interface TransactionTableProps {
|
|
title?: string
|
|
th?: string[]
|
|
tr?: any
|
|
}
|
|
|
|
const FlexMain = styled.div`
|
|
margin-top: 30px;
|
|
height: 405px;
|
|
background: #fff;
|
|
font-size: 18px;
|
|
color: #999999;
|
|
z-index: 9999;
|
|
position: relative;
|
|
background: #fff;
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
|
border-radius: 20px;
|
|
`
|
|
const HeaderText = styled(Text)`
|
|
font-size: 24px;
|
|
color: #333333;
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
`
|
|
|
|
const TypeFlex = styled(Flex)`
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 35px;
|
|
padding-left: 30px;
|
|
& > .active {
|
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
|
color: #fff;
|
|
}
|
|
`
|
|
const TypeItem = styled(Flex)`
|
|
width: 128px;
|
|
height: 42px;
|
|
border: 1px solid #1fc7d4;
|
|
border-radius: 30px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: #1fc7d4;
|
|
margin-right: 15px;
|
|
cursor: pointer;
|
|
`
|
|
const TableThemed = styled(Flex)`
|
|
height: 42px;
|
|
align-items: center;
|
|
`
|
|
const ThemedItem = styled.div`
|
|
width: 100%;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
border-top: 1px solid #e3e3e3;
|
|
`
|
|
const TableBody = styled.div``
|
|
const TrFlex = styled(Flex)`
|
|
height: 42px;
|
|
border-top: 1px solid #e3e3e3;
|
|
align-items: center;
|
|
`
|
|
const TdFlex = styled(Flex)`
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
color: #666666;
|
|
font-size: 16px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
`
|
|
const TdImage = styled(Image)`
|
|
margin-right: 20px;
|
|
`
|
|
const TdBtnFlex = styled(Flex)`
|
|
width: 197px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`
|
|
const DetailButton = styled(Button)`
|
|
width: 80px;
|
|
height: 30px;
|
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
|
border-radius: 30px;
|
|
font-size: 12px;
|
|
`
|
|
const HashText = styled(Text)`
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: #1fc7d4;
|
|
margin-top: 5px;
|
|
border-bottom: 1px solid #1fc7d4;
|
|
`
|
|
|
|
const TransactionTable: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
|
|
const ThemedList = [t('incident'), t('unit price'), t('seller'), t('purchaser'), t('trading hour')]
|
|
|
|
const list = [
|
|
{
|
|
name: 'Cat goddess Emerald ',
|
|
icon: '',
|
|
price: '1',
|
|
newPrice: '2',
|
|
time: '2022-02-02',
|
|
status: '已售卖',
|
|
id: '1',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<FlexMain>
|
|
<HeaderText>{t('Transaction history')}</HeaderText>
|
|
<>
|
|
<TableThemed>
|
|
{ThemedList.map((item) => {
|
|
return <ThemedItem key={item}>{item}</ThemedItem>
|
|
})}
|
|
</TableThemed>
|
|
<TableBody>
|
|
{list.map((item) => {
|
|
return (
|
|
<TrFlex key={item.id}>
|
|
<TdFlex>{item.name}</TdFlex>
|
|
<TdFlex>{item.price}</TdFlex>
|
|
<TdFlex>{item.newPrice}</TdFlex>
|
|
<TdFlex>{item.time}</TdFlex>
|
|
<TdFlex>{item.status}</TdFlex>
|
|
</TrFlex>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</>
|
|
</FlexMain>
|
|
)
|
|
}
|
|
|
|
export default TransactionTable
|