Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x | import { useEffect } from 'react';
import { AlertTriangle } from 'lucide-react';
import { Card, CardContent } from './Card';
import { Button } from './Button';
interface ConfirmModalProps {
title: string;
message: string;
confirmText?: string;
cancelText?: string;
variant?: 'danger' | 'warning' | 'default';
onConfirm: () => void;
onCancel: () => void;
}
export function ConfirmModal({
title,
message,
confirmText = 'Confirm',
cancelText = 'Cancel',
variant = 'default',
onConfirm,
onCancel,
}: ConfirmModalProps) {
// Close on Escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onCancel();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [onCancel]);
const variantStyles = {
danger: {
icon: 'text-red-400',
button: 'bg-red-500 hover:bg-red-600',
},
warning: {
icon: 'text-yellow-400',
button: 'bg-yellow-500 hover:bg-yellow-600',
},
default: {
icon: 'text-bambu-green',
button: 'bg-bambu-green hover:bg-bambu-green-dark',
},
};
const styles = variantStyles[variant];
return (
<div
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
onClick={onCancel}
>
<Card className="w-full max-w-md" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<CardContent className="p-6">
<div className="flex items-start gap-4">
<div className={`p-2 rounded-full bg-bambu-dark ${styles.icon}`}>
<AlertTriangle className="w-6 h-6" />
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
<p className="text-bambu-gray text-sm">{message}</p>
</div>
</div>
<div className="flex gap-3 mt-6">
<Button variant="secondary" onClick={onCancel} className="flex-1">
{cancelText}
</Button>
<Button
onClick={onConfirm}
className={`flex-1 ${styles.button}`}
>
{confirmText}
</Button>
</div>
</CardContent>
</Card>
</div>
);
}
|