54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
import type { ReactNode } from 'react';
|
|
import Icon from './Icon';
|
|
// import Tooltip from './Tooltip';
|
|
|
|
type DialogProps = {
|
|
title?: ReactNode;
|
|
tooltip: ReactNode;
|
|
trigger: ReactNode;
|
|
children: ReactNode;
|
|
open?: boolean;
|
|
fullscreen?: boolean;
|
|
className?: string;
|
|
onOpenChange?: (open: boolean) => void;
|
|
};
|
|
|
|
export default function Dialog({
|
|
title,
|
|
tooltip,
|
|
trigger,
|
|
children,
|
|
open,
|
|
fullscreen,
|
|
className,
|
|
onOpenChange
|
|
}: DialogProps) {
|
|
return (
|
|
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
|
|
{/* <Tooltip label={tooltip}> */}
|
|
<DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
|
|
{/* </Tooltip> */}
|
|
<DialogPrimitive.Portal>
|
|
<DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-highlight-primary/50" />
|
|
<DialogPrimitive.Content
|
|
className={cn(
|
|
'fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2 transform flex-col overflow-hidden rounded-lg bg-primary-800 shadow-lg sm:w-1/3 sm:bg-primary-800/50',
|
|
className
|
|
)}
|
|
>
|
|
{title && (
|
|
<div className="flex w-full justify-between pb-4">
|
|
{title}
|
|
<DialogPrimitive.Trigger>
|
|
<Icon name="close-fill" className="hover:text-highlight-secondary" />
|
|
</DialogPrimitive.Trigger>
|
|
</div>
|
|
)}
|
|
{children}
|
|
</DialogPrimitive.Content>
|
|
</DialogPrimitive.Portal>
|
|
</DialogPrimitive.Root>
|
|
);
|
|
}
|