Add tests and edit works

components/SaveOptionsModal.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Save, Copy, X } from 'lucide-react';
+
+interface SaveOptionsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaveNew: () => void;
+  onOverwrite: () => void;
+  isSaving?: boolean;
+}
+
+export const SaveOptionsModal: React.FC<SaveOptionsModalProps> = ({
+  isOpen,
+  onClose,
+  onSaveNew,
+  onOverwrite,
+  isSaving
+}) => {
+  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>
+  );
+};