jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 5 complete

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 16:38:25 -07:00
commit 93ea01525e
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
7 changed files with 433 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

29
components/QuizCreator.tsx
View file

@ -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"