66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
|
|
import type { ReactElement } from 'react';
|
|
import React from 'react';
|
|
|
|
import type { Button } from './Button';
|
|
import type Text from './Text/Text';
|
|
|
|
/**
|
|
* Props for the PromptDialog component.
|
|
*/
|
|
export interface PromptDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: ReactElement<typeof Text>;
|
|
content: ReactElement<typeof Text>;
|
|
children?: ReactElement<typeof Button>[];
|
|
}
|
|
|
|
/**
|
|
* A reusable dialog component that can be used to display a prompt to the user.
|
|
* @param {PromptDialogProps} props.isOpen - Whether the dialog is open or not.
|
|
* @param {Function} props.onClose - A function to call when the user exits the dialog.
|
|
* @param {React.ReactElement<typeof Text>} props.title - The title of the dialog.
|
|
* @param {React.ReactElement<typeof Text>} props.content - The content of the dialog.
|
|
* @param {React.ReactElement<typeof Button>[]} props.children - The buttons to display in the dialog.
|
|
*/
|
|
function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialogProps) {
|
|
return (
|
|
<Transition appear show={isOpen} as={React.Fragment}>
|
|
<Dialog as='div' onClose={onClose} className='relative z-50'>
|
|
<TransitionChild
|
|
as={React.Fragment}
|
|
enter='ease-out duration-200'
|
|
enterFrom='opacity-0'
|
|
enterTo='opacity-100'
|
|
leave='ease-in duration-200'
|
|
leaveFrom='opacity-100'
|
|
leaveTo='opacity-0'
|
|
>
|
|
<div className='fixed inset-0 bg-black bg-opacity-50' aria-hidden='true' />
|
|
</TransitionChild>
|
|
|
|
<TransitionChild
|
|
as={React.Fragment}
|
|
enter='ease-out duration-200'
|
|
enterFrom='opacity-0 scale-95'
|
|
enterTo='opacity-100 scale-100'
|
|
leave='ease-in duration-200'
|
|
leaveFrom='opacity-100 scale-100'
|
|
leaveTo='opacity-0 scale-95'
|
|
>
|
|
<div className='fixed inset-0 w-screen flex items-center justify-center'>
|
|
<DialogPanel className='h-[200] w-[431px] flex flex-col rounded bg-white p-6'>
|
|
<DialogTitle className='mb-[10px]'>{title}</DialogTitle>
|
|
<Description className='mb-[13px]'>{content}</Description>
|
|
<div className='flex items-center justify-end gap-2'>{children}</div>
|
|
</DialogPanel>
|
|
</div>
|
|
</TransitionChild>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|
|
|
|
export default PromptDialog;
|