Scoreboard ui stuff

This commit is contained in:
Joey Yakimowich-Payne 2026-01-15 08:21:38 -07:00
commit 279dc7f2c3
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
12 changed files with 1558 additions and 77 deletions

View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useAuth } from 'react-oidc-context';
import { Quiz, Question, AnswerOption } from '../types';
import { v4 as uuidv4 } from 'uuid';
@ -18,7 +18,14 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
const [options, setOptions] = useState<string[]>(['', '', '', '']);
const [reasons, setReasons] = useState<string[]>(['', '', '', '']);
const [correctIdx, setCorrectIdx] = useState<number>(0);
const [saveToLibrary, setSaveToLibrary] = useState(false);
const [saveToLibrary, setSaveToLibrary] = useState(auth.isAuthenticated);
const [hasToggledSave, setHasToggledSave] = useState(false);
useEffect(() => {
if (auth.isAuthenticated && !hasToggledSave) {
setSaveToLibrary(true);
}
}, [auth.isAuthenticated, hasToggledSave]);
const handleAddQuestion = () => {
if (!qText.trim() || options.some(o => !o.trim())) {
@ -182,12 +189,15 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
<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"
/>
<input
type="checkbox"
checked={saveToLibrary}
onChange={(e) => {
setSaveToLibrary(e.target.checked);
setHasToggledSave(true);
}}
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>