Add File

src/elderly/components/ConfirmDialog.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+interface ConfirmDialogProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * 老人友好的确认对话框
+ * 替代浏览器的 confirm
+ */
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ message, onConfirm, onCancel }) => {
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-yellow-50 border-4 border-yellow-300 rounded-3xl shadow-2xl p-8 max-w-md w-full animate-in fade-in zoom-in duration-300">
+        <div className="flex flex-col items-center gap-6">
+          <AlertTriangle size={64} className="text-yellow-600" />
+          <p className="text-elderly-xl text-gray-900 text-center font-bold leading-relaxed">
+            {message}
+          </p>
+          <div className="flex gap-4 w-full">
+            <button
+              onClick={onCancel}
+              className="btn-elderly bg-gray-400 hover:bg-gray-500 flex-1"
+            >
+              取消
+            </button>
+            <button
+              onClick={onConfirm}
+              className="btn-elderly bg-yellow-500 hover:bg-yellow-600 flex-1"
+            >
+              确定
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};