42 lines
1.2 KiB
TypeScript
Executable File
42 lines
1.2 KiB
TypeScript
Executable File
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {InfoDialogTriggerIcon} from '@common/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger-icon';
|
|
import {Dialog, DialogSize} from '@common/ui/overlays/dialog/dialog';
|
|
import {DialogHeader} from '@common/ui/overlays/dialog/dialog-header';
|
|
import {DialogBody} from '@common/ui/overlays/dialog/dialog-body';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import React, {ReactNode} from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
interface Props {
|
|
title?: ReactNode;
|
|
body: ReactNode;
|
|
dialogSize?: DialogSize;
|
|
className?: string;
|
|
}
|
|
export function InfoDialogTrigger({
|
|
title,
|
|
body,
|
|
dialogSize = 'sm',
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<DialogTrigger type="popover" triggerOnHover>
|
|
<IconButton
|
|
className={clsx('ml-4 text-muted opacity-70', className)}
|
|
iconSize="xs"
|
|
size="2xs"
|
|
>
|
|
<InfoDialogTriggerIcon viewBox="0 0 16 16" />
|
|
</IconButton>
|
|
<Dialog size={dialogSize}>
|
|
{title && (
|
|
<DialogHeader padding="px-18 pt-12" size="md" hideDismissButton>
|
|
{title}
|
|
</DialogHeader>
|
|
)}
|
|
<DialogBody>{body}</DialogBody>
|
|
</Dialog>
|
|
</DialogTrigger>
|
|
);
|
|
}
|