Phase 5 complete

components/SaveQuizPrompt.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Save, X, Loader2, BrainCircuit } from 'lucide-react';
+
+interface SaveQuizPromptProps {
+  isOpen: boolean;
+  quizTitle: string;
+  onSave: () => Promise<void>;
+  onSkip: () => void;
+}
+
+export const SaveQuizPrompt: React.FC<SaveQuizPromptProps> = ({
+  isOpen,
+  quizTitle,
+  onSave,
+  onSkip
+}) => {
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await onSave();
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={!isSaving ? onSkip : undefined}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0, y: 20 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              exit={{ scale: 0.9, opacity: 0, y: 20 }}
+              transition={{ type: "spring", bounce: 0.4 }}
+              onClick={(e) => e.stopPropagation()}
+              className="bg-white w-full max-w-md flex flex-col rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50 relative overflow-hidden"
+            >
+              <div className="p-8 text-center">
+                <div className="bg-theme-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
+                  <BrainCircuit size={40} className="text-theme-primary" />
+                </div>
+                
+                <h2 className="text-3xl font-black text-gray-900 mb-2 tracking-tight">Save this Quiz?</h2>
+                <p className="text-gray-500 font-bold mb-6">
+                  "{quizTitle}" generated successfully! Would you like to save it to your library?
+                </p>
+
+                <div className="space-y-3">
+                  <button
+                    onClick={handleSave}
+                    disabled={isSaving}
+                    className="w-full bg-theme-primary text-white py-4 rounded-2xl text-xl font-black shadow-[0_4px_0_#1e40af] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2 hover:bg-theme-primary-dark disabled:opacity-70 disabled:active:shadow-[0_4px_0_#1e40af] disabled:active:translate-y-0 disabled:cursor-not-allowed"
+                  >
+                    {isSaving ? (
+                      <>
+                        <Loader2 className="animate-spin" size={24} />
+                        Saving...
+                      </>
+                    ) : (
+                      <>
+                        <Save size={24} strokeWidth={3} />
+                        Save to Library
+                      </>
+                    )}
+                  </button>
+
+                  <button
+                    onClick={onSkip}
+                    disabled={isSaving}
+                    className="w-full bg-gray-100 text-gray-500 py-3 rounded-2xl text-lg font-bold hover:bg-gray-200 hover:text-gray-700 transition-colors disabled:opacity-50"
+                  >
+                    Skip & Don't Save
+                  </button>
+                </div>
+              </div>
+
+              <div className="absolute top-4 right-4">
+                <button
+                  onClick={onSkip}
+                  disabled={isSaving}
+                  className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600 disabled:opacity-0"
+                >
+                  <X size={24} strokeWidth={3} />
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};