86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Save, Copy, X } from 'lucide-react';
|
|
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
|
|
|
|
interface SaveOptionsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSaveNew: () => void;
|
|
onOverwrite: () => void;
|
|
isSaving?: boolean;
|
|
}
|
|
|
|
export const SaveOptionsModal: React.FC<SaveOptionsModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onSaveNew,
|
|
onOverwrite,
|
|
isSaving
|
|
}) => {
|
|
useBodyScrollLock(isOpen);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.9, opacity: 0 }}
|
|
className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-xl font-black text-gray-900">Save Quiz</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-gray-600 mb-6">
|
|
This quiz was loaded from your library. How would you like to save your changes?
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={onOverwrite}
|
|
disabled={isSaving}
|
|
className="w-full flex items-center gap-3 p-4 rounded-xl border-2 border-theme-primary bg-theme-primary/5 hover:bg-theme-primary/10 transition disabled:opacity-50"
|
|
>
|
|
<div className="p-2 bg-theme-primary rounded-lg">
|
|
<Save size={20} className="text-white" />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="font-bold text-gray-900">Update existing quiz</p>
|
|
<p className="text-sm text-gray-500">Overwrite the original with your changes</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={onSaveNew}
|
|
disabled={isSaving}
|
|
className="w-full flex items-center gap-3 p-4 rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition disabled:opacity-50"
|
|
>
|
|
<div className="p-2 bg-gray-200 rounded-lg">
|
|
<Copy size={20} className="text-gray-600" />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="font-bold text-gray-900">Save as new quiz</p>
|
|
<p className="text-sm text-gray-500">Keep the original and create a copy</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|