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
30 lines
915 B
TypeScript
30 lines
915 B
TypeScript
import { chakra, Flex, GridItem } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { Hint } from 'toolkit/components/Hint/Hint';
|
|
|
|
interface Props {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
isLoading: boolean;
|
|
hint?: string;
|
|
}
|
|
|
|
const ContractDetailsInfoItem = ({ label, children, className, isLoading, hint }: Props) => {
|
|
return (
|
|
<GridItem display="flex" columnGap={ 6 } wordBreak="break-all" className={ className } alignItems="baseline">
|
|
<Skeleton loading={ isLoading } w="170px" flexShrink={ 0 } fontWeight={ 500 }>
|
|
<Flex alignItems="center">
|
|
{ label }
|
|
{ hint && <Hint label={ hint } ml={ 2 }/> }
|
|
</Flex>
|
|
</Skeleton>
|
|
<Skeleton loading={ isLoading }>{ children }</Skeleton>
|
|
</GridItem>
|
|
);
|
|
};
|
|
|
|
export default React.memo(chakra(ContractDetailsInfoItem));
|