52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import React from "react"
|
|
import { Divider, Text, Icon, } from "@chakra-ui/react"
|
|
|
|
import { HBetween, HFStack } from "./base"
|
|
import { VPanel } from "./Panels"
|
|
|
|
|
|
export const PoolData = ({ icon, title, data }) => {
|
|
const TL = ({ title }) => (
|
|
<Text
|
|
color="gray.500"
|
|
fontSize="16"
|
|
>
|
|
{title}
|
|
</Text>
|
|
)
|
|
|
|
const TR = ({ value, ...rest }) => (
|
|
<Text
|
|
fontSize="16"
|
|
fontWeight="700"
|
|
{...rest}
|
|
>
|
|
{value}
|
|
</Text>
|
|
)
|
|
|
|
return (
|
|
<VPanel>
|
|
<HFStack>
|
|
{icon && <Icon as={icon} />}
|
|
<Text
|
|
fontSize="18"
|
|
fontWeight="700"
|
|
>
|
|
{title}
|
|
</Text>
|
|
</HFStack>
|
|
|
|
<Divider />
|
|
|
|
{
|
|
data && data.map((d, index) => (
|
|
<HBetween key={index} py="2">
|
|
<TL title={d.name} />
|
|
<TR color={d.emp ? "blue.400" : ''} value={d.value + ' ' + d.unit} />
|
|
</HBetween>
|
|
))
|
|
}
|
|
</VPanel>
|
|
)
|
|
} |