File size: 1,626 Bytes
c30ea2a | 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 |
import { useTranslations } from "@/i18n/compat/client";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
interface ThemedAlertDialogProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title: string;
}
const ThemeModal = ({
isOpen,
onClose,
onConfirm,
title,
}: ThemedAlertDialogProps) => {
const t = useTranslations("themeModal.delete");
return (
<AlertDialog open={isOpen} onOpenChange={onClose}>
<AlertDialogContent onClick={(e) => e.stopPropagation()}>
<AlertDialogHeader>
<AlertDialogTitle>{t("title")}</AlertDialogTitle>
<AlertDialogDescription>
<span>
{t.raw("description").split("{title}")[0]}
<span className="px-1 font-semibold text-foreground">{title}</span>
{t.raw("description").split("{title}")[1]}
</span>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={onClose}>{t("cancelText")}</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.stopPropagation();
onConfirm();
}}
className="bg-red-600 hover:bg-red-700 text-white focus:ring-red-600 border-none"
>
{t("confirmText")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
};
export default ThemeModal;
|