102 lines
3.8 KiB
TypeScript
102 lines
3.8 KiB
TypeScript
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>
|
|
);
|
|
};
|