df7d818514
- AppSwitcher: add dark mode backgrounds, borders and hover effects - ConfirmDialog: apply dark theme colors to dialog elements - ProviderList: update list items and buttons for dark mode - Global styles: use color-scheme property for native controls theming Ensures all interactive components have proper visual feedback and consistent UX in dark mode.
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { AlertTriangle, X } from "lucide-react";
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
|
|
isOpen,
|
|
title,
|
|
message,
|
|
confirmText = "确定",
|
|
cancelText = "取消",
|
|
onConfirm,
|
|
onCancel,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={onCancel}
|
|
/>
|
|
|
|
{/* Dialog */}
|
|
<div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center">
|
|
<AlertTriangle size={20} className="text-red-500" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
<p className="text-gray-500 dark:text-gray-400 leading-relaxed">
|
|
{message}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900">
|
|
<button
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
|
|
autoFocus
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="px-4 py-2 text-sm font-medium bg-red-500 text-white hover:bg-red-500/90 rounded-md transition-colors"
|
|
>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|