40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { useTranslation } from '../../i18n/LanguageContext';
|
|
|
|
const SaveDialog = ({ show, onSave, onDiscard, onCancel }) => {
|
|
const t = useTranslation();
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-800">
|
|
<h3 className="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">{t('savedialog.title')}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-6">{t('savedialog.message')}</p>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={onSave}
|
|
className="flex-1 bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700 transition font-semibold"
|
|
>
|
|
{t('savedialog.yes')}
|
|
</button>
|
|
<button
|
|
onClick={onDiscard}
|
|
className="flex-1 bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition font-semibold"
|
|
>
|
|
{t('savedialog.no')}
|
|
</button>
|
|
<button
|
|
onClick={onCancel}
|
|
className="flex-1 bg-gray-500 dark:bg-gray-700 text-white px-4 py-3 rounded-lg hover:bg-gray-600 dark:hover:bg-gray-600 transition font-semibold"
|
|
>
|
|
{t('savedialog.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SaveDialog;
|