60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { Box } from '@radix-ui/themes';
|
|
import { Info, type LucideProps } from 'lucide-react';
|
|
import { Tooltip } from 'radix-ui';
|
|
import type { PropsWithChildren } from 'react';
|
|
|
|
export type InfoIconProps = PropsWithChildren<
|
|
{
|
|
tooltipContainerProps?: Omit<Tooltip.TooltipContentProps & React.RefAttributes<HTMLDivElement>, 'children'>;
|
|
} & Omit<LucideProps, 'ref'> &
|
|
React.RefAttributes<SVGSVGElement>
|
|
>;
|
|
|
|
export function InfoIcon({ tooltipContainerProps, children, ...iconProps }: InfoIconProps) {
|
|
return (
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger asChild>
|
|
<Info size={16} {...iconProps} />
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content
|
|
//
|
|
side="top"
|
|
align="center"
|
|
sideOffset={5}
|
|
alignOffset={0}
|
|
avoidCollisions={true}
|
|
style={{
|
|
color: 'black',
|
|
backgroundColor: 'white',
|
|
fontSize: 12,
|
|
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
|
|
border: '1px solid var(--gray-5)',
|
|
}}
|
|
{...tooltipContainerProps}
|
|
>
|
|
{children}
|
|
<Tooltip.Arrow className="TooltipArrow" fill="white" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
);
|
|
}
|
|
|
|
export function TooltipContentContainer({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<Box
|
|
style={{
|
|
padding: '8px 12px',
|
|
color: 'black',
|
|
backgroundColor: 'white',
|
|
borderRadius: 4,
|
|
fontSize: 12,
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|