56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { type ReactNode } from 'react';
|
|
import { Dialog as RDialog } from 'radix-ui';
|
|
import { X } from '@phosphor-icons/react';
|
|
import { IconButton } from '../icon-button';
|
|
|
|
export const Dialog = ({
|
|
trigger,
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
open,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
modal,
|
|
}: {
|
|
trigger?: ReactNode;
|
|
title: string;
|
|
description?: ReactNode;
|
|
children?: ReactNode;
|
|
footer?: ReactNode;
|
|
open?: boolean;
|
|
defaultOpen?: boolean;
|
|
onOpenChange?: (o: boolean) => void;
|
|
modal?: boolean;
|
|
}) => (
|
|
<RDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
|
|
{trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
|
|
<RDialog.Portal>
|
|
<RDialog.Overlay className="modern-sk-overlay" />
|
|
<RDialog.Content className="modern-sk-dialog">
|
|
<RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
|
|
{description && (
|
|
<RDialog.Description className="modern-sk-dialog__desc">
|
|
{description}
|
|
</RDialog.Description>
|
|
)}
|
|
{children && <div className="modern-sk-dialog__body">{children}</div>}
|
|
{footer && <div className="modern-sk-dialog__footer">{footer}</div>}
|
|
<RDialog.Close asChild>
|
|
<IconButton
|
|
variant="ghost"
|
|
size="sm"
|
|
className="modern-sk-dialog__close"
|
|
aria-label="Close"
|
|
>
|
|
<X size={14} weight="bold" />
|
|
</IconButton>
|
|
</RDialog.Close>
|
|
</RDialog.Content>
|
|
</RDialog.Portal>
|
|
</RDialog.Root>
|
|
);
|
|
|
|
export const DialogClose = RDialog.Close;
|