diff --git a/components/QuestionEditModal.tsx b/components/QuestionEditModal.tsx index 6f22183..653fbba 100644 --- a/components/QuestionEditModal.tsx +++ b/components/QuestionEditModal.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { motion } from 'framer-motion'; import { X, Plus, Trash2, Triangle, Diamond, Circle, Square, Clock } from 'lucide-react'; import { Question, AnswerOption } from '../types'; +import { useBodyScrollLock } from '../hooks/useBodyScrollLock'; interface QuestionEditModalProps { question: Question; @@ -39,6 +40,8 @@ export const QuestionEditModal: React.FC = ({ const [options, setOptions] = useState(question.options); const [timeLimit, setTimeLimit] = useState(question.timeLimit); + useBodyScrollLock(true); + const handleOptionTextChange = (index: number, newText: string) => { setOptions(prev => prev.map((opt, i) => i === index ? { ...opt, text: newText } : opt diff --git a/components/QuizEditor.tsx b/components/QuizEditor.tsx index 65b9a5a..a5507d0 100644 --- a/components/QuizEditor.tsx +++ b/components/QuizEditor.tsx @@ -6,6 +6,7 @@ import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSo import { Quiz, Question } from '../types'; import { SortableQuestionCard } from './SortableQuestionCard'; import { QuestionEditModal } from './QuestionEditModal'; +import { useBodyScrollLock } from '../hooks/useBodyScrollLock'; import { v4 as uuidv4 } from 'uuid'; interface QuizEditorProps { @@ -31,6 +32,8 @@ export const QuizEditor: React.FC = ({ const [showDeleteConfirm, setShowDeleteConfirm] = useState(null); const [titleEditing, setTitleEditing] = useState(false); + useBodyScrollLock(!!showDeleteConfirm); + const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } diff --git a/components/QuizLibrary.tsx b/components/QuizLibrary.tsx index ba2ce3c..bd25caa 100644 --- a/components/QuizLibrary.tsx +++ b/components/QuizLibrary.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar } from 'lucide-react'; import { QuizListItem } from '../types'; +import { useBodyScrollLock } from '../hooks/useBodyScrollLock'; interface QuizLibraryProps { isOpen: boolean; @@ -31,6 +32,8 @@ export const QuizLibrary: React.FC = ({ const [confirmDeleteId, setConfirmDeleteId] = useState(null); const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId; + useBodyScrollLock(isOpen); + const handleDeleteClick = (e: React.MouseEvent, id: string) => { e.stopPropagation(); setConfirmDeleteId(id); diff --git a/components/SaveOptionsModal.tsx b/components/SaveOptionsModal.tsx index 8c99061..580c5d6 100644 --- a/components/SaveOptionsModal.tsx +++ b/components/SaveOptionsModal.tsx @@ -1,6 +1,7 @@ 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; @@ -17,6 +18,8 @@ export const SaveOptionsModal: React.FC = ({ onOverwrite, isSaving }) => { + useBodyScrollLock(isOpen); + if (!isOpen) return null; return ( diff --git a/components/SaveQuizPrompt.tsx b/components/SaveQuizPrompt.tsx index 5cc8b86..55b607a 100644 --- a/components/SaveQuizPrompt.tsx +++ b/components/SaveQuizPrompt.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Save, X, Loader2, BrainCircuit } from 'lucide-react'; +import { useBodyScrollLock } from '../hooks/useBodyScrollLock'; interface SaveQuizPromptProps { isOpen: boolean; @@ -17,6 +18,8 @@ export const SaveQuizPrompt: React.FC = ({ }) => { const [isSaving, setIsSaving] = useState(false); + useBodyScrollLock(isOpen); + const handleSave = async () => { setIsSaving(true); try { diff --git a/hooks/useBodyScrollLock.ts b/hooks/useBodyScrollLock.ts new file mode 100644 index 0000000..497d820 --- /dev/null +++ b/hooks/useBodyScrollLock.ts @@ -0,0 +1,12 @@ +import { useEffect } from 'react'; + +export const useBodyScrollLock = (isLocked: boolean) => { + useEffect(() => { + if (isLocked) { + document.body.style.overflow = 'hidden'; + } + return () => { + document.body.style.overflow = ''; + }; + }, [isLocked]); +};