forked from rajun/ar-test
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from '~/components/ui/dialog';
|
|
import { Button } from '~/components/ui/button';
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
|
|
interface ConfirmDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
description: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: 'destructive' | 'default';
|
|
loading?: boolean;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
description,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
variant = 'destructive',
|
|
loading = false,
|
|
onConfirm,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-md bg-[#121212] border-neutral-850 p-6">
|
|
<DialogHeader className="space-y-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-red-500 shrink-0">
|
|
<AlertTriangle size={20} />
|
|
</div>
|
|
<div>
|
|
<DialogTitle className="text-base font-bold text-white uppercase tracking-wider">
|
|
{title}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs text-neutral-400 mt-1">
|
|
{description}
|
|
</DialogDescription>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter className="mt-6 flex flex-row items-center justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={loading}
|
|
onClick={() => onOpenChange(false)}
|
|
className="h-9"
|
|
>
|
|
{cancelText}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant={variant}
|
|
size="sm"
|
|
disabled={loading}
|
|
onClick={onConfirm}
|
|
className="h-9"
|
|
>
|
|
{loading ? (
|
|
<RefreshCw size={14} className="animate-spin" />
|
|
) : (
|
|
confirmText
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|