| import { AlertTriangle } from 'lucide-react'; |
|
|
| import { Button } from '@/components/ui/button'; |
| import { |
| Dialog, |
| DialogContent, |
| DialogDescription, |
| DialogFooter, |
| DialogHeader, |
| DialogTitle, |
| } from '@/components/ui/dialog'; |
|
|
| interface ConfirmDialogProps { |
| isOpen: boolean; |
| onClose: () => void; |
| onConfirm: () => void; |
| title: string; |
| description: string; |
| confirmText?: string; |
| cancelText?: string; |
| variant?: 'destructive' | 'default'; |
| isLoading?: boolean; |
| } |
|
|
| export function ConfirmDialog({ |
| isOpen, |
| onClose, |
| onConfirm, |
| title, |
| description, |
| confirmText = 'Confirm', |
| cancelText = 'Cancel', |
| variant = 'default', |
| isLoading = false, |
| }: ConfirmDialogProps) { |
| return ( |
| <Dialog open={isOpen} onOpenChange={onClose}> |
| <DialogContent className="max-w-md"> |
| <DialogHeader> |
| <div className="flex items-center gap-3"> |
| {variant === 'destructive' && ( |
| <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100"> |
| <AlertTriangle className="h-5 w-5 text-red-600" /> |
| </div> |
| )} |
| <div> |
| <DialogTitle>{title}</DialogTitle> |
| <DialogDescription className="mt-1"> |
| {description} |
| </DialogDescription> |
| </div> |
| </div> |
| </DialogHeader> |
| |
| <DialogFooter className="gap-2"> |
| <Button |
| type="button" |
| variant="outline" |
| onClick={onClose} |
| disabled={isLoading} |
| > |
| {cancelText} |
| </Button> |
| <Button |
| type="button" |
| variant={variant} |
| onClick={onConfirm} |
| disabled={isLoading} |
| > |
| {isLoading ? 'Processing...' : confirmText} |
| </Button> |
| </DialogFooter> |
| </DialogContent> |
| </Dialog> |
| ); |
| } |
|
|
