File size: 2,732 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { forwardRef, ReactNode, Ref } from 'react';
import {
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from './Dialog';
import { cn } from '~/utils/';
type SelectionProps = {
selectHandler?: () => void;
selectClasses?: string;
selectText?: string;
};
type DialogTemplateProps = {
title: string;
description?: string;
main?: ReactNode;
buttons?: ReactNode;
leftButtons?: ReactNode;
selection?: SelectionProps;
className?: string;
headerClassName?: string;
footerClassName?: string;
showCloseButton?: boolean;
showCancelButton?: boolean;
};
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const {
title,
description,
main,
buttons,
leftButtons,
selection,
className,
headerClassName,
footerClassName,
showCloseButton,
showCancelButton = true,
} = props;
const { selectHandler, selectClasses, selectText } = selection || {};
const Cancel = 'cancel';
const defaultSelect =
'bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-200';
return (
<DialogContent
showCloseButton={showCloseButton}
ref={ref}
className={cn('shadow-2xl dark:bg-gray-700', className || '')}
onClick={(e) => e.stopPropagation()}
>
<DialogHeader className={cn(headerClassName ?? '')}>
<DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
{title}
</DialogTitle>
{description && (
<DialogDescription className="text-gray-600 dark:text-gray-300">
{description}
</DialogDescription>
)}
</DialogHeader>
<div className="px-6">{main ? main : null}</div>
<DialogFooter className={footerClassName}>
<div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-3">
{showCancelButton && (
<DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600">
{Cancel}
</DialogClose>
)}
{buttons ? buttons : null}
{selection ? (
<DialogClose
onClick={selectHandler}
className={`${
selectClasses || defaultSelect
} inline-flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
>
{selectText}
</DialogClose>
) : null}
</div>
</DialogFooter>
</DialogContent>
);
});
export default DialogTemplate;
|