Add import/export
This commit is contained in:
parent
02ecca7598
commit
667c490537
9 changed files with 2261 additions and 54 deletions
284
components/ImportQuizzesModal.tsx
Normal file
284
components/ImportQuizzesModal.tsx
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, FileUp, FileJson, Check, AlertCircle, Loader2, BrainCircuit, PenTool } from 'lucide-react';
|
||||
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
|
||||
import type { ExportedQuiz, QuizExportFile } from '../types';
|
||||
|
||||
interface ImportQuizzesModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onImport: (quizzes: ExportedQuiz[]) => Promise<void>;
|
||||
parseFile: (file: File) => Promise<QuizExportFile>;
|
||||
importing: boolean;
|
||||
}
|
||||
|
||||
type ImportStep = 'upload' | 'select';
|
||||
|
||||
export const ImportQuizzesModal: React.FC<ImportQuizzesModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onImport,
|
||||
parseFile,
|
||||
importing,
|
||||
}) => {
|
||||
const [step, setStep] = useState<ImportStep>('upload');
|
||||
const [parsedFile, setParsedFile] = useState<QuizExportFile | null>(null);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||||
const [parseError, setParseError] = useState<string | null>(null);
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useBodyScrollLock(isOpen);
|
||||
|
||||
const resetState = () => {
|
||||
setStep('upload');
|
||||
setParsedFile(null);
|
||||
setSelectedIds(new Set());
|
||||
setParseError(null);
|
||||
setDragActive(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetState();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleFileSelect = async (file: File) => {
|
||||
setParseError(null);
|
||||
|
||||
if (!file.name.endsWith('.json')) {
|
||||
setParseError('Please select a JSON file');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = await parseFile(file);
|
||||
setParsedFile(parsed);
|
||||
setSelectedIds(new Set(parsed.quizzes.map((_, i) => i)));
|
||||
setStep('select');
|
||||
} catch (err) {
|
||||
setParseError(err instanceof Error ? err.message : 'Failed to parse file');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragActive(false);
|
||||
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) handleFileSelect(file);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragActive(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setDragActive(false);
|
||||
};
|
||||
|
||||
const toggleQuiz = (index: number) => {
|
||||
const newSelected = new Set(selectedIds);
|
||||
if (newSelected.has(index)) {
|
||||
newSelected.delete(index);
|
||||
} else {
|
||||
newSelected.add(index);
|
||||
}
|
||||
setSelectedIds(newSelected);
|
||||
};
|
||||
|
||||
const toggleAll = () => {
|
||||
if (!parsedFile) return;
|
||||
if (selectedIds.size === parsedFile.quizzes.length) {
|
||||
setSelectedIds(new Set());
|
||||
} else {
|
||||
setSelectedIds(new Set(parsedFile.quizzes.map((_, i) => i)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!parsedFile || selectedIds.size === 0) return;
|
||||
|
||||
const quizzesToImport = parsedFile.quizzes.filter((_, i) => selectedIds.has(i));
|
||||
await onImport(quizzesToImport);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={handleClose}
|
||||
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-2xl max-h-[80vh] 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-6 border-b-2 border-gray-100 flex justify-between items-center bg-white sticky top-0 z-10">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight">Import Quizzes</h2>
|
||||
<p className="text-gray-500 font-bold text-sm">
|
||||
{step === 'upload' ? 'Select a Kaboot export file' : `${selectedIds.size} of ${parsedFile?.quizzes.length} selected`}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
disabled={importing}
|
||||
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600 disabled:opacity-50"
|
||||
>
|
||||
<X size={24} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 bg-gray-50">
|
||||
{step === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`border-3 border-dashed rounded-2xl p-12 text-center cursor-pointer transition-all ${
|
||||
dragActive
|
||||
? 'border-theme-primary bg-theme-primary/5'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className={`p-4 rounded-2xl ${dragActive ? 'bg-theme-primary/10' : 'bg-gray-100'}`}>
|
||||
<FileJson size={48} className={dragActive ? 'text-theme-primary' : 'text-gray-400'} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold text-gray-700">
|
||||
{dragActive ? 'Drop file here' : 'Drag & drop or click to select'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 font-medium mt-1">
|
||||
Accepts .json export files
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{parseError && (
|
||||
<div className="flex items-center gap-3 bg-red-50 border-2 border-red-100 p-4 rounded-2xl">
|
||||
<AlertCircle size={20} className="text-red-500 flex-shrink-0" />
|
||||
<p className="text-red-600 font-medium">{parseError}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'select' && parsedFile && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={toggleAll}
|
||||
disabled={importing}
|
||||
className="text-sm font-bold text-theme-primary hover:underline disabled:opacity-50"
|
||||
>
|
||||
{selectedIds.size === parsedFile.quizzes.length ? 'Deselect All' : 'Select All'}
|
||||
</button>
|
||||
<p className="text-sm text-gray-400 font-medium">
|
||||
Exported {new Date(parsedFile.exportedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{parsedFile.quizzes.map((quiz, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
onClick={() => !importing && toggleQuiz(index)}
|
||||
className={`group bg-white p-4 rounded-2xl border-2 transition-all cursor-pointer ${
|
||||
selectedIds.has(index)
|
||||
? 'border-theme-primary shadow-md'
|
||||
: 'border-gray-100 hover:border-gray-200'
|
||||
} ${importing ? 'opacity-70 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 transition-all ${
|
||||
selectedIds.has(index)
|
||||
? 'bg-theme-primary border-theme-primary'
|
||||
: 'border-gray-300'
|
||||
}`}>
|
||||
{selectedIds.has(index) && (
|
||||
<Check size={16} className="text-white" strokeWidth={3} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{quiz.source === 'ai_generated' ? (
|
||||
<span className="bg-purple-100 text-purple-600 px-2 py-0.5 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
|
||||
<BrainCircuit size={10} /> AI
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
|
||||
<PenTool size={10} /> Manual
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800 truncate">{quiz.title}</h3>
|
||||
<p className="text-sm text-gray-500 font-medium">
|
||||
{quiz.questions.length} question{quiz.questions.length !== 1 ? 's' : ''}
|
||||
{quiz.aiTopic && <span className="text-gray-400"> · {quiz.aiTopic}</span>}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{step === 'select' && (
|
||||
<div className="p-6 border-t-2 border-gray-100 bg-white flex gap-3">
|
||||
<button
|
||||
onClick={() => setStep('upload')}
|
||||
disabled={importing}
|
||||
className="px-6 py-3 rounded-xl font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors disabled:opacity-50"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
onClick={handleImport}
|
||||
disabled={importing || selectedIds.size === 0}
|
||||
className="flex-1 bg-theme-primary text-white px-6 py-3 rounded-xl font-bold shadow-[0_4px_0_var(--theme-primary-dark)] active:shadow-none active:translate-y-[4px] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{importing ? (
|
||||
<>
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
Importing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileUp size={20} />
|
||||
Import {selectedIds.size} Quiz{selectedIds.size !== 1 ? 'zes' : ''}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,6 +5,7 @@ import { BrainCircuit, Loader2, Play, PenTool, BookOpen, Upload, X, FileText, Im
|
|||
import { useAuth } from 'react-oidc-context';
|
||||
import { AuthButton } from './AuthButton';
|
||||
import { QuizLibrary } from './QuizLibrary';
|
||||
import { ImportQuizzesModal } from './ImportQuizzesModal';
|
||||
import { DefaultConfigModal } from './DefaultConfigModal';
|
||||
import { PreferencesModal } from './PreferencesModal';
|
||||
import { ApiKeyModal } from './ApiKeyModal';
|
||||
|
|
@ -68,6 +69,7 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
|
||||
const modalParam = searchParams.get('modal');
|
||||
const libraryOpen = modalParam === 'library';
|
||||
const importOpen = modalParam === 'import';
|
||||
const preferencesOpen = modalParam === 'preferences';
|
||||
const defaultConfigOpen = modalParam === 'settings';
|
||||
const accountSettingsOpen = modalParam === 'account';
|
||||
|
|
@ -89,6 +91,10 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
setSearchParams(buildCleanParams({ modal: open ? 'library' : null }));
|
||||
};
|
||||
|
||||
const setImportOpen = (open: boolean) => {
|
||||
setSearchParams(buildCleanParams({ modal: open ? 'import' : null }));
|
||||
};
|
||||
|
||||
const setPreferencesOpen = (open: boolean) => {
|
||||
setSearchParams(buildCleanParams({ modal: open ? 'preferences' : null }));
|
||||
};
|
||||
|
|
@ -127,10 +133,15 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
loading: libraryLoading,
|
||||
loadingQuizId,
|
||||
deletingQuizId,
|
||||
exporting,
|
||||
importing,
|
||||
error: libraryError,
|
||||
fetchQuizzes,
|
||||
loadQuiz,
|
||||
deleteQuiz,
|
||||
exportQuizzes,
|
||||
importQuizzes,
|
||||
parseImportFile,
|
||||
retry: retryLibrary
|
||||
} = useQuizLibrary();
|
||||
|
||||
|
|
@ -610,12 +621,23 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
loading={libraryLoading}
|
||||
loadingQuizId={loadingQuizId}
|
||||
deletingQuizId={deletingQuizId}
|
||||
exporting={exporting}
|
||||
error={libraryError}
|
||||
onLoadQuiz={handleLoadQuiz}
|
||||
onDeleteQuiz={deleteQuiz}
|
||||
onExportQuizzes={exportQuizzes}
|
||||
onImportClick={() => setImportOpen(true)}
|
||||
onRetry={retryLibrary}
|
||||
/>
|
||||
|
||||
<ImportQuizzesModal
|
||||
isOpen={importOpen}
|
||||
onClose={() => setImportOpen(false)}
|
||||
onImport={importQuizzes}
|
||||
parseFile={parseImportFile}
|
||||
importing={importing}
|
||||
/>
|
||||
|
||||
<DefaultConfigModal
|
||||
isOpen={defaultConfigOpen}
|
||||
onClose={() => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar } from 'lucide-react';
|
||||
import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar, FileDown, FileUp, Check, ListChecks } from 'lucide-react';
|
||||
import { QuizListItem } from '../types';
|
||||
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
|
||||
|
||||
|
|
@ -11,9 +11,12 @@ interface QuizLibraryProps {
|
|||
loading: boolean;
|
||||
loadingQuizId: string | null;
|
||||
deletingQuizId: string | null;
|
||||
exporting: boolean;
|
||||
error: string | null;
|
||||
onLoadQuiz: (id: string) => void;
|
||||
onDeleteQuiz: (id: string) => void;
|
||||
onExportQuizzes: (ids: string[]) => Promise<void>;
|
||||
onImportClick: () => void;
|
||||
onRetry: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -24,16 +27,53 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|||
loading,
|
||||
loadingQuizId,
|
||||
deletingQuizId,
|
||||
exporting,
|
||||
error,
|
||||
onLoadQuiz,
|
||||
onDeleteQuiz,
|
||||
onExportQuizzes,
|
||||
onImportClick,
|
||||
onRetry,
|
||||
}) => {
|
||||
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
||||
const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId;
|
||||
const [selectMode, setSelectMode] = useState(false);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||
const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId || exporting;
|
||||
|
||||
useBodyScrollLock(isOpen);
|
||||
|
||||
const toggleSelectMode = () => {
|
||||
if (selectMode) {
|
||||
setSelectedIds(new Set());
|
||||
}
|
||||
setSelectMode(!selectMode);
|
||||
};
|
||||
|
||||
const toggleQuizSelection = (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
const newSelected = new Set(selectedIds);
|
||||
if (newSelected.has(id)) {
|
||||
newSelected.delete(id);
|
||||
} else {
|
||||
newSelected.add(id);
|
||||
}
|
||||
setSelectedIds(newSelected);
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.size === quizzes.length) {
|
||||
setSelectedIds(new Set());
|
||||
} else {
|
||||
setSelectedIds(new Set(quizzes.map(q => q.id)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
await onExportQuizzes(Array.from(selectedIds));
|
||||
setSelectMode(false);
|
||||
setSelectedIds(new Set());
|
||||
};
|
||||
|
||||
const handleDeleteClick = (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
setConfirmDeleteId(id);
|
||||
|
|
@ -90,14 +130,45 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|||
<div className="p-6 border-b-2 border-gray-100 flex justify-between items-center bg-white sticky top-0 z-10">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight">My Library</h2>
|
||||
<p className="text-gray-500 font-bold text-sm">Select a quiz to play</p>
|
||||
<p className="text-gray-500 font-bold text-sm">
|
||||
{selectMode
|
||||
? `${selectedIds.size} of ${quizzes.length} selected`
|
||||
: 'Select a quiz to play'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{!loading && quizzes.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={onImportClick}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-theme-primary disabled:opacity-50"
|
||||
title="Import quizzes"
|
||||
>
|
||||
<FileUp size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleSelectMode}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className={`p-2 rounded-xl transition-colors disabled:opacity-50 ${
|
||||
selectMode
|
||||
? 'bg-theme-primary/10 text-theme-primary'
|
||||
: 'hover:bg-gray-100 text-gray-400 hover:text-theme-primary'
|
||||
}`}
|
||||
title={selectMode ? 'Cancel selection' : 'Select for export'}
|
||||
>
|
||||
<ListChecks size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={24} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={24} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
|
||||
|
|
@ -127,6 +198,24 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|||
</div>
|
||||
<h3 className="text-xl font-black text-gray-400">No saved quizzes yet</h3>
|
||||
<p className="text-gray-400 font-medium">Create or generate a quiz to save it here!</p>
|
||||
<button
|
||||
onClick={onImportClick}
|
||||
className="inline-flex items-center gap-2 bg-theme-primary text-white px-4 py-2 rounded-xl font-bold hover:bg-theme-primary-dark transition-colors"
|
||||
>
|
||||
<FileUp size={18} /> Import Quizzes
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectMode && quizzes.length > 0 && (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<button
|
||||
onClick={toggleSelectAll}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="text-sm font-bold text-theme-primary hover:underline disabled:opacity-50"
|
||||
>
|
||||
{selectedIds.size === quizzes.length ? 'Deselect All' : 'Select All'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -136,10 +225,34 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`group bg-white p-4 rounded-2xl border-2 border-gray-100 hover:border-theme-primary hover:shadow-md transition-all relative overflow-hidden ${isAnyOperationInProgress ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`}
|
||||
onClick={() => !isAnyOperationInProgress && onLoadQuiz(quiz.id)}
|
||||
className={`group bg-white p-4 rounded-2xl border-2 transition-all relative overflow-hidden ${
|
||||
selectMode && selectedIds.has(quiz.id)
|
||||
? 'border-theme-primary shadow-md'
|
||||
: 'border-gray-100 hover:border-theme-primary hover:shadow-md'
|
||||
} ${isAnyOperationInProgress ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`}
|
||||
onClick={(e) => {
|
||||
if (isAnyOperationInProgress) return;
|
||||
if (selectMode) {
|
||||
toggleQuizSelection(e, quiz.id);
|
||||
} else {
|
||||
onLoadQuiz(quiz.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
{selectMode && (
|
||||
<div className="flex items-center mr-4">
|
||||
<div className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 transition-all ${
|
||||
selectedIds.has(quiz.id)
|
||||
? 'bg-theme-primary border-theme-primary'
|
||||
: 'border-gray-300'
|
||||
}`}>
|
||||
{selectedIds.has(quiz.id) && (
|
||||
<Check size={16} className="text-white" strokeWidth={3} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{quiz.source === 'ai_generated' ? (
|
||||
|
|
@ -166,52 +279,83 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pl-4">
|
||||
{loadingQuizId === quiz.id ? (
|
||||
<div className="p-3">
|
||||
<Loader2 size={24} className="animate-spin text-theme-primary" />
|
||||
</div>
|
||||
) : deletingQuizId === quiz.id ? (
|
||||
<div className="p-3">
|
||||
<Loader2 size={24} className="animate-spin text-red-500" />
|
||||
</div>
|
||||
) : confirmDeleteId === quiz.id ? (
|
||||
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={confirmDelete}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="bg-red-500 text-white px-3 py-2 rounded-xl text-sm font-bold shadow-[0_3px_0_#991b1b] active:shadow-none active:translate-y-[3px] transition-all disabled:opacity-50"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelDelete}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="bg-gray-200 text-gray-600 px-3 py-2 rounded-xl text-sm font-bold hover:bg-gray-300 transition-all disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => handleDeleteClick(e, quiz.id)}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="p-3 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Delete quiz"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
<div className="bg-theme-primary/10 p-3 rounded-xl text-theme-primary group-hover:bg-theme-primary group-hover:text-white transition-all">
|
||||
<Play size={24} fill="currentColor" />
|
||||
{!selectMode && (
|
||||
<div className="flex items-center gap-3 pl-4">
|
||||
{loadingQuizId === quiz.id ? (
|
||||
<div className="p-3">
|
||||
<Loader2 size={24} className="animate-spin text-theme-primary" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : deletingQuizId === quiz.id ? (
|
||||
<div className="p-3">
|
||||
<Loader2 size={24} className="animate-spin text-red-500" />
|
||||
</div>
|
||||
) : confirmDeleteId === quiz.id ? (
|
||||
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={confirmDelete}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="bg-red-500 text-white px-3 py-2 rounded-xl text-sm font-bold shadow-[0_3px_0_#991b1b] active:shadow-none active:translate-y-[3px] transition-all disabled:opacity-50"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelDelete}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="bg-gray-200 text-gray-600 px-3 py-2 rounded-xl text-sm font-bold hover:bg-gray-300 transition-all disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => handleDeleteClick(e, quiz.id)}
|
||||
disabled={isAnyOperationInProgress}
|
||||
className="p-3 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Delete quiz"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
<div className="bg-theme-primary/10 p-3 rounded-xl text-theme-primary group-hover:bg-theme-primary group-hover:text-white transition-all">
|
||||
<Play size={24} fill="currentColor" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectMode && (
|
||||
<div className="p-6 border-t-2 border-gray-100 bg-white flex gap-3">
|
||||
<button
|
||||
onClick={toggleSelectMode}
|
||||
disabled={exporting}
|
||||
className="px-6 py-3 rounded-xl font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting || selectedIds.size === 0}
|
||||
className="flex-1 bg-theme-primary text-white px-6 py-3 rounded-xl font-bold shadow-[0_4px_0_var(--theme-primary-dark)] active:shadow-none active:translate-y-[4px] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{exporting ? (
|
||||
<>
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
Exporting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileDown size={20} />
|
||||
Export {selectedIds.size} Quiz{selectedIds.size !== 1 ? 'zes' : ''}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue