118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import styled, { keyframes } from 'styled-components'
|
|
import { useTranslation } from 'contexts/Localization'
|
|
import { Flex, Image } from '@pancakeswap/uikit'
|
|
|
|
const ShopItem = styled.div`
|
|
/* height: 358px; */
|
|
border-radius: 20px;
|
|
/* background: rgba(255, 255, 255, 0.39);
|
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15); */
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
& > .ribbon {
|
|
width: 106px;
|
|
height: 108px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: -6px;
|
|
z-index: 10;
|
|
& > .ribbon1 {
|
|
line-height: 14px;
|
|
text-align: center;
|
|
transform: rotate(-45deg);
|
|
position: relative;
|
|
padding: 8px 0;
|
|
left: -33px;
|
|
top: 26px;
|
|
width: 150px;
|
|
color: white;
|
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
|
letter-spacing: 1px;
|
|
font-size: 14px;
|
|
|
|
${({ theme }) => theme.mediaQueries.xs} {
|
|
padding: 2px 0;
|
|
left: -43px;
|
|
top: 16px;
|
|
}
|
|
${({ theme }) => theme.mediaQueries.lg} {
|
|
padding: 8px 0;
|
|
left: -33px;
|
|
top: 26px;
|
|
}
|
|
}
|
|
& > .epic {
|
|
background: linear-gradient(180deg, #efea48 0%, #f32121 100%);
|
|
}
|
|
& > .legend {
|
|
background: linear-gradient(180deg, #4b84f5 0%, #bc21f3 100%);
|
|
}
|
|
& > .uncommon {
|
|
background: linear-gradient(180deg, #3dffec 0%, #24bf52 100%);
|
|
}
|
|
& > .common {
|
|
background: linear-gradient(180deg, #b5e9f3 0%, #1195d9 100%);
|
|
}
|
|
}
|
|
`
|
|
const ItemText = styled(Flex)`
|
|
padding: 10px 0;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
color: #707070;
|
|
text-align: center;
|
|
`
|
|
const ImageType = styled.img`
|
|
border-radius: 20px;
|
|
`
|
|
const ProbabilityFlex = styled(Flex)`
|
|
font-size: 26px;
|
|
justify-content: center;
|
|
color: #3cbbcc;
|
|
`
|
|
const ProbabilityTitle = styled(Flex)`
|
|
font-size: 18px;
|
|
color: #666666;
|
|
margin-top: 5px;
|
|
justify-content: center;
|
|
`
|
|
|
|
interface ShopListItemProps {
|
|
item?: Detail
|
|
grade?: string
|
|
}
|
|
interface Detail {
|
|
goodsId?: string
|
|
grade?: string
|
|
id?: string
|
|
name?: string
|
|
proportion?: number | string
|
|
}
|
|
|
|
const ShopList: React.FC<ShopListItemProps> = ({ item, grade }) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<ShopItem key={item.id}>
|
|
<div className="ribbon">
|
|
{grade === 'EPIC' && <div className="ribbon1 epic">{t('epic')}</div>}
|
|
{grade === 'LEGEND' && <div className="ribbon1 legend">{t('legend')}</div>}
|
|
{grade === 'RARE' && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
|
{grade === 'NORMAL' && <div className="ribbon1 common">{t('common')}</div>}
|
|
</div>
|
|
{/* <ImageType src="/images/nft/epic.svg" width={211} height={213} /> */}
|
|
{grade === 'EPIC' && <ImageType src="/images/nft/epic.svg" width={211} height={213} />}
|
|
{grade === 'LEGEND' && <ImageType src="/images/nft/legend.svg" width={211} height={213} />}
|
|
{grade === 'RARE' && <ImageType src="/images/nft/uncommon.svg" width={211} height={213} />}
|
|
{grade === 'NORMAL' && <ImageType src="/images/nft/common.svg" width={211} height={213} />}
|
|
<ItemText>{item.name}</ItemText>
|
|
<ProbabilityFlex>{item.proportion}%</ProbabilityFlex>
|
|
<ProbabilityTitle>{t('The rate of')}</ProbabilityTitle>
|
|
</ShopItem>
|
|
)
|
|
}
|
|
export default ShopList
|