File size: 2,311 Bytes
3b6afc0 |
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 |
import { forwardRef, ReactNode, Ref } from 'react';
import {
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from './';
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;
};
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const { title, description, main, buttons, leftButtons, selection, className } = props;
const { selectHandler, selectClasses, selectText } = selection || {};
const defaultSelect =
'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900';
return (
<DialogContent ref={ref} className={cn('shadow-2xl dark:bg-gray-900', className || '')}>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 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>
<div>{leftButtons ? leftButtons : null}</div>
<div className="flex gap-2">
<DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
{buttons ? buttons : null}
{selection ? (
<DialogClose
onClick={selectHandler}
className={`${
selectClasses || defaultSelect
} inline-flex h-10 items-center justify-center rounded-md border-none px-4 py-2 text-sm font-semibold`}
>
{selectText}
</DialogClose>
) : null}
</div>
</DialogFooter>
</DialogContent>
);
});
export default DialogTemplate;
|