47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
'use client';
|
||
|
||
import { Loader2 } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
|
||
interface ChatDeleteMessageDialogProps {
|
||
open: boolean;
|
||
count: number;
|
||
loading?: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
onConfirm: () => void | Promise<void>;
|
||
}
|
||
|
||
export function ChatDeleteMessageDialog({ open, count, loading, onOpenChange, onConfirm }: ChatDeleteMessageDialogProps) {
|
||
const plural =
|
||
count === 1 ? 'это сообщение' : count < 5 ? `${count} сообщения` : `${count} сообщений`;
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="rounded-[24px] sm:max-w-[420px]">
|
||
<DialogHeader>
|
||
<DialogTitle>Удалить сообщение?</DialogTitle>
|
||
</DialogHeader>
|
||
<p className="text-sm text-[#667085]">
|
||
{count === 1
|
||
? 'Сообщение будет удалено для всех участников чата. Это действие нельзя отменить.'
|
||
: `Будут удалены ${plural}. Это действие нельзя отменить.`}
|
||
</p>
|
||
<div className="mt-6 flex justify-end gap-2">
|
||
<Button type="button" variant="secondary" className="rounded-xl" disabled={loading} onClick={() => onOpenChange(false)}>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
className="rounded-xl bg-red-600 text-white hover:bg-red-700"
|
||
disabled={loading}
|
||
onClick={() => void onConfirm()}
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Удалить'}
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|