114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import styled, { keyframes } from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { formatTimeNumber } from 'utils/formatBalance'
|
|
import { Flex, Text, Image } from '@pancakeswap/uikit'
|
|
import useToast from 'hooks/useToast'
|
|
import { ListProps } from 'types/bazaar'
|
|
import { useAccount } from 'state/userInfo/hooks'
|
|
import useRefresh from 'hooks/useRefresh'
|
|
import { TOKEN_SYMBOL } from 'config/index'
|
|
|
|
import ShopList from './ShopList'
|
|
|
|
interface ContentShop {
|
|
list?: ListProps[]
|
|
getDetail?: (v) => void
|
|
}
|
|
|
|
const ShopMain = styled.div`
|
|
width: 100%;
|
|
display: grid;
|
|
gap: 18px;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
${({ theme }) => theme.mediaQueries.md} {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
`
|
|
const ShopFlex = styled(Flex)`
|
|
flex-direction: column;
|
|
background: rgba(255, 255, 255, 0.39);
|
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
|
opacity: 1;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
`
|
|
|
|
const ShopName = styled(Text)`
|
|
padding: 10px 0 14px 0;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #666666;
|
|
border-bottom: 1px solid #e3e3e3;
|
|
`
|
|
const ShopFooter = styled(Flex)`
|
|
padding: 15px;
|
|
justify-content: space-between;
|
|
`
|
|
const FooterLabel = styled(Text)`
|
|
font-size: 14px;
|
|
color: #999999;
|
|
`
|
|
const FooterValue = styled(Flex)`
|
|
/* width: 40%; */
|
|
font-size: 16px;
|
|
color: #1fc7d4;
|
|
flex-wrap: wrap;
|
|
`
|
|
|
|
const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
|
|
const { t } = useTranslation()
|
|
const account = useAccount()
|
|
const { toastSuccess, toastError } = useToast()
|
|
|
|
const showDetail = (id) => {
|
|
getDetail(id)
|
|
}
|
|
|
|
return (
|
|
<ShopMain>
|
|
{list.map((item) => {
|
|
return (
|
|
<ShopFlex key={item.id} onClick={() => showDetail(item)}>
|
|
<ShopList
|
|
item={item}
|
|
width={278}
|
|
height={302}
|
|
img={item.coverResource.url}
|
|
grade={item.grade}
|
|
borderRadius="20px 20px 0 0"
|
|
/>
|
|
<ShopName>{item.name}</ShopName>
|
|
<ShopFooter>
|
|
<FooterLabel>{t('trading value')}</FooterLabel>
|
|
<FooterValue>
|
|
{item.priceList.map((childItem, index) => {
|
|
return (
|
|
<Flex alignItems="center" key={childItem.label}>
|
|
{/* <>{formatTimeNumber(childItem.value)}</> */}
|
|
<>{Number(childItem.value).toFixed(2)}</>
|
|
<Text color="text">{childItem.label}</Text>
|
|
{index === 0 && item.priceList.length === 2 && <Text margin="0 5px">-</Text>}
|
|
</Flex>
|
|
)
|
|
})}
|
|
</FooterValue>
|
|
</ShopFooter>
|
|
</ShopFlex>
|
|
)
|
|
})}
|
|
</ShopMain>
|
|
)
|
|
}
|
|
export default ContentShop
|