Phase 5 complete

components/QuizCreator.tsx

@@ -1,21 +1,24 @@
 import React, { useState } from 'react';
+import { useAuth } from 'react-oidc-context';
 import { Quiz, Question, AnswerOption } from '../types';
 import { v4 as uuidv4 } from 'uuid';
-import { Plus, Save, Trash2, CheckCircle, Circle, X } from 'lucide-react';
+import { Plus, Save, Trash2, CheckCircle, Circle, X, BookOpen } from 'lucide-react';
 import { COLORS, SHAPES } from '../constants';
 
 interface QuizCreatorProps {
-  onFinalize: (quiz: Quiz) => void;
+  onFinalize: (quiz: Quiz, saveToLibrary: boolean) => void;
   onCancel: () => void;
 }
 
 export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }) => {
+  const auth = useAuth();
   const [title, setTitle] = useState('');
   const [questions, setQuestions] = useState<Question[]>([]);
   const [qText, setQText] = useState('');
   const [options, setOptions] = useState<string[]>(['', '', '', '']);
   const [reasons, setReasons] = useState<string[]>(['', '', '', '']);
   const [correctIdx, setCorrectIdx] = useState<number>(0);
+  const [saveToLibrary, setSaveToLibrary] = useState(false);
 
   const handleAddQuestion = () => {
     if (!qText.trim() || options.some(o => !o.trim())) {
@@ -53,7 +56,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
 
   const handleFinalize = () => {
     if (!title.trim() || questions.length === 0) return;
-    onFinalize({ title, questions });
+    onFinalize({ title, questions }, saveToLibrary);
   };
 
   return (
@@ -176,7 +179,25 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
           </div>
         </div>
 
-        <div className="p-6 bg-gray-50 border-t-2 border-gray-100 flex justify-end">
+        <div className="p-6 bg-gray-50 border-t-2 border-gray-100 flex justify-between items-center">
+           {auth.isAuthenticated ? (
+             <label className="flex items-center gap-3 cursor-pointer select-none group">
+               <input
+                 type="checkbox"
+                 checked={saveToLibrary}
+                 onChange={(e) => setSaveToLibrary(e.target.checked)}
+                 className="sr-only peer"
+               />
+               <div className="w-6 h-6 border-2 border-gray-300 rounded-lg flex items-center justify-center peer-checked:bg-theme-primary peer-checked:border-theme-primary transition-all group-hover:border-gray-400">
+                 {saveToLibrary && <CheckCircle size={16} className="text-white" />}
+               </div>
+               <span className="text-gray-600 font-bold flex items-center gap-2">
+                 <BookOpen size={18} /> Save to my library
+               </span>
+             </label>
+           ) : (
+             <div />
+           )}
            <button 
              onClick={handleFinalize}
              className="flex items-center gap-2 bg-green-500 text-white px-10 py-4 rounded-2xl text-xl font-black hover:bg-green-600 shadow-[0_6px_0_#15803d] active:shadow-none active:translate-y-[6px] transition-all"

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>
+  );
+};