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
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { Icon } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import InfoIcon from 'icons/info.svg';
|
|
|
|
import type { IconButtonProps } from '../../chakra/icon-button';
|
|
import { IconButton } from '../../chakra/icon-button';
|
|
import type { TooltipProps } from '../../chakra/tooltip';
|
|
import { Tooltip } from '../../chakra/tooltip';
|
|
|
|
interface Props extends IconButtonProps {
|
|
label: string | React.ReactNode;
|
|
tooltipProps?: Partial<TooltipProps>;
|
|
isLoading?: boolean;
|
|
as?: React.ElementType;
|
|
}
|
|
|
|
export const Hint = React.memo(({ label, tooltipProps, isLoading, boxSize = 5, ...rest }: Props) => {
|
|
return (
|
|
<Tooltip
|
|
content={ label }
|
|
positioning={{ placement: 'top' }}
|
|
{ ...tooltipProps }
|
|
>
|
|
<IconButton
|
|
aria-label="hint"
|
|
boxSize={ boxSize }
|
|
loadingSkeleton={ isLoading }
|
|
borderRadius="sm"
|
|
color="icon.info"
|
|
_hover={{ color: 'link.primary.hover' }}
|
|
{ ...rest }
|
|
>
|
|
<Icon boxSize={ boxSize }>
|
|
<InfoIcon/>
|
|
</Icon>
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
});
|