mirror of
https://github.com/hanzonet/explore.git
synced 2026-10-30 18:16:57 +00:00
tom goriunovandGitHub
5e80806796
* first version of the pack * single entry point * add custom components to the package * move form components to toolkit * add more utils and hooks to the package * minor fixes * add CI workflow * update readme and package.json * fix ts * fix build of env-validator * fix docker build * fix icons size * test fixes * more test fixes
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { Flex, Text } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { Heading } from 'toolkit/chakra/heading';
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { Hint } from 'toolkit/components/Hint/Hint';
|
|
|
|
import MeritsIcon from '../MeritsIcon';
|
|
|
|
type Props = {
|
|
label?: string;
|
|
value: number | string | undefined;
|
|
withIcon?: boolean;
|
|
hint?: string | React.ReactNode;
|
|
isLoading?: boolean;
|
|
bottomText?: string;
|
|
};
|
|
|
|
const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading, bottomText }: Props) => (
|
|
<Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
|
|
{ label && (
|
|
<Flex alignItems="center" gap={ 1 }>
|
|
{ hint && <Hint label={ hint }/> }
|
|
<Text textStyle="xs" fontWeight="500" color="text.secondary">
|
|
{ label }
|
|
</Text>
|
|
</Flex>
|
|
) }
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap={ 2 }
|
|
minW="100px"
|
|
>
|
|
{ withIcon && <MeritsIcon boxSize={ 8 }/> }
|
|
<Heading level="1">
|
|
{ value }
|
|
</Heading>
|
|
</Skeleton>
|
|
{ bottomText && (
|
|
<Skeleton loading={ isLoading }>
|
|
<Text textStyle="xs" fontWeight="500" color="text.secondary">
|
|
{ bottomText }
|
|
</Text>
|
|
</Skeleton>
|
|
) }
|
|
</Flex>
|
|
);
|
|
|
|
export default RewardsDashboardCard;
|