64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import { Flex, Text, Link } from '@pancakeswap/uikit'
|
|
|
|
interface FlexProps {
|
|
name: string
|
|
value: string | number
|
|
paddings?: string
|
|
leftColor?: string
|
|
rightColor?: string
|
|
typeLink?: string
|
|
size?: string
|
|
textColor?: string
|
|
rightSize?: string
|
|
}
|
|
|
|
const FlexDiv = styled(Flex)`
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 14px;
|
|
& > .linkText:hover {
|
|
color: #1fc7d4 !important;
|
|
border-bottom: 1px solid #1fc7d4 !important;
|
|
}
|
|
`
|
|
const TextLink = styled(Text)`
|
|
cursor: pointer;
|
|
`
|
|
|
|
const FlexCom: React.FC<FlexProps> = ({
|
|
name,
|
|
value,
|
|
paddings = '0px',
|
|
leftColor = '#666666',
|
|
rightColor = 'textSubtle',
|
|
typeLink,
|
|
size = '14px',
|
|
textColor = '#666666',
|
|
rightSize = '14px',
|
|
}) => {
|
|
const openPage = () => {
|
|
window.open(typeLink)
|
|
}
|
|
|
|
return (
|
|
<FlexDiv style={{ padding: paddings }}>
|
|
<Text style={{ fontSize: size, color: leftColor }}>{name}</Text>
|
|
{typeLink ? (
|
|
<TextLink
|
|
color={rightColor}
|
|
style={{ color: textColor, borderBottom: `1px solid ${textColor}` }}
|
|
onClick={openPage}
|
|
className="linkText"
|
|
>
|
|
{value}
|
|
</TextLink>
|
|
) : (
|
|
<Text style={{ color: textColor, fontSize: rightSize }}>{value}</Text>
|
|
)}
|
|
</FlexDiv>
|
|
)
|
|
}
|
|
export default FlexCom
|