Add gemini key ability
This commit is contained in:
parent
9363f643f0
commit
73c7d3efed
11 changed files with 793 additions and 228 deletions
|
|
@ -1,12 +1,15 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { BrainCircuit, Loader2, Play, PenTool, BookOpen, Upload, X, FileText, Image, ScanText, Sparkles, Settings } from 'lucide-react';
|
||||
import { BrainCircuit, Loader2, Play, PenTool, BookOpen, Upload, X, FileText, Image, ScanText, Sparkles, Settings, Palette, Lock } from 'lucide-react';
|
||||
import { useAuth } from 'react-oidc-context';
|
||||
import { AuthButton } from './AuthButton';
|
||||
import { QuizLibrary } from './QuizLibrary';
|
||||
import { DefaultConfigModal } from './DefaultConfigModal';
|
||||
import { PreferencesModal } from './PreferencesModal';
|
||||
import { ApiKeyModal } from './ApiKeyModal';
|
||||
import { useQuizLibrary } from '../hooks/useQuizLibrary';
|
||||
import { useUserConfig } from '../hooks/useUserConfig';
|
||||
import { useUserPreferences } from '../hooks/useUserPreferences';
|
||||
import type { Quiz, GameConfig } from '../types';
|
||||
|
||||
type GenerateMode = 'topic' | 'document';
|
||||
|
|
@ -22,7 +25,7 @@ interface LandingProps {
|
|||
|
||||
export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, onLoadQuiz, onJoin, isLoading, error }) => {
|
||||
const auth = useAuth();
|
||||
const [mode, setMode] = useState<'HOST' | 'JOIN'>('HOST');
|
||||
const [mode, setMode] = useState<'HOST' | 'JOIN'>('JOIN');
|
||||
const [generateMode, setGenerateMode] = useState<GenerateMode>('topic');
|
||||
const [topic, setTopic] = useState('');
|
||||
const [pin, setPin] = useState('');
|
||||
|
|
@ -35,12 +38,16 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
const [useOcr, setUseOcr] = useState(false);
|
||||
const [defaultConfigOpen, setDefaultConfigOpen] = useState(false);
|
||||
const [editingDefaultConfig, setEditingDefaultConfig] = useState<GameConfig | null>(null);
|
||||
const [preferencesOpen, setPreferencesOpen] = useState(false);
|
||||
const [accountSettingsOpen, setAccountSettingsOpen] = useState(false);
|
||||
|
||||
const hasImageFile = selectedFiles.some(f => f.type.startsWith('image/'));
|
||||
const hasDocumentFile = selectedFiles.some(f => !f.type.startsWith('image/') && !['application/pdf', 'text/plain', 'text/markdown', 'text/csv', 'text/html'].includes(f.type));
|
||||
const showOcrOption = hasImageFile || hasDocumentFile;
|
||||
|
||||
const { defaultConfig, saving: savingConfig, saveDefaultConfig } = useUserConfig();
|
||||
const { preferences, hasAIAccess, saving: savingPrefs, savePreferences, applyColorScheme } = useUserPreferences();
|
||||
const canUseAI = auth.isAuthenticated && (hasAIAccess || preferences.geminiApiKey);
|
||||
|
||||
const {
|
||||
quizzes,
|
||||
|
|
@ -104,7 +111,8 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
setUseOcr(false);
|
||||
};
|
||||
|
||||
const canGenerate = generateMode === 'topic' ? topic.trim() : selectedFiles.length > 0;
|
||||
const canGenerateInput = generateMode === 'topic' ? topic.trim() : selectedFiles.length > 0;
|
||||
const canGenerate = canUseAI && canGenerateInput;
|
||||
|
||||
const handleHostSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -140,18 +148,27 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
<div className="flex flex-col items-center justify-center min-h-screen p-4 text-center relative">
|
||||
<div className="absolute top-4 right-4 flex items-center gap-2">
|
||||
{auth.isAuthenticated && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingDefaultConfig(defaultConfig);
|
||||
setDefaultConfigOpen(true);
|
||||
}}
|
||||
className="p-2.5 bg-white/90 hover:bg-white rounded-xl shadow-md hover:shadow-lg transition-all text-gray-600 hover:text-theme-primary"
|
||||
title="Default Game Settings"
|
||||
>
|
||||
<Settings size={20} />
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
onClick={() => setPreferencesOpen(true)}
|
||||
className="p-2.5 bg-white/90 hover:bg-white rounded-xl shadow-md hover:shadow-lg transition-all text-gray-600 hover:text-theme-primary"
|
||||
title="Preferences"
|
||||
>
|
||||
<Palette size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingDefaultConfig(defaultConfig);
|
||||
setDefaultConfigOpen(true);
|
||||
}}
|
||||
className="p-2.5 bg-white/90 hover:bg-white rounded-xl shadow-md hover:shadow-lg transition-all text-gray-600 hover:text-theme-primary"
|
||||
title="Default Game Settings"
|
||||
>
|
||||
<Settings size={20} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<AuthButton />
|
||||
<AuthButton onAccountSettingsClick={() => setAccountSettingsOpen(true)} />
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0, rotate: -2 }}
|
||||
|
|
@ -184,209 +201,226 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
|
||||
{mode === 'HOST' ? (
|
||||
<div className="space-y-4">
|
||||
<form onSubmit={handleHostSubmit} className="space-y-4">
|
||||
<div className="flex bg-gray-100 p-1.5 rounded-xl mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGenerateMode('topic')}
|
||||
className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
|
||||
generateMode === 'topic'
|
||||
? 'bg-white shadow-sm text-theme-primary'
|
||||
: 'text-gray-400 hover:text-gray-600'
|
||||
}`}
|
||||
{!auth.isAuthenticated ? (
|
||||
<div className="text-center py-6">
|
||||
<Lock size={32} className="mx-auto mb-3 text-gray-400" />
|
||||
<p className="text-gray-500 font-bold mb-4">Sign in to host quizzes</p>
|
||||
<button
|
||||
onClick={() => auth.signinRedirect()}
|
||||
className="bg-theme-primary text-white py-3 px-6 rounded-2xl font-black hover:opacity-90 transition-all"
|
||||
>
|
||||
<Sparkles size={16} /> Topic
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGenerateMode('document')}
|
||||
className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
|
||||
generateMode === 'document'
|
||||
? 'bg-white shadow-sm text-theme-primary'
|
||||
: 'text-gray-400 hover:text-gray-600'
|
||||
}`}
|
||||
>
|
||||
<FileText size={16} /> Document
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{generateMode === 'topic' ? (
|
||||
<motion.div
|
||||
key="topic"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter a topic (e.g. 'Space')"
|
||||
value={topic}
|
||||
onChange={(e) => setTopic(e.target.value)}
|
||||
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none transition-all placeholder:font-medium text-center"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="document"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={() => document.getElementById('file-upload')?.click()}
|
||||
className={`border-2 border-dashed rounded-2xl p-4 text-center cursor-pointer transition-all ${
|
||||
isDragging
|
||||
? 'border-theme-primary bg-theme-primary/5 scale-[1.02]'
|
||||
: selectedFiles.length > 0
|
||||
? 'border-theme-primary/50 bg-theme-primary/5'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
accept=".pdf,.txt,.md,.docx,.pptx,.xlsx,.odt,.odp,.ods,.rtf,.jpg,.jpeg,.png,.gif,.webp"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Upload className={`mx-auto ${isDragging ? 'text-theme-primary' : 'text-gray-400'}`} size={28} />
|
||||
<p className="text-sm font-bold text-gray-600">
|
||||
{isDragging ? 'Drop files here' : 'Drop files or click to browse'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">PDF, DOCX, PPTX, XLSX, TXT, Images</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-bold text-gray-600">{selectedFiles.length} file{selectedFiles.length > 1 ? 's' : ''} selected</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
clearAllFiles();
|
||||
}}
|
||||
className="text-xs font-bold text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-32 overflow-y-auto space-y-1.5">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-white p-2 rounded-lg shadow-sm">
|
||||
<div className="flex items-center gap-2 overflow-hidden text-left">
|
||||
<div className="p-1.5 bg-theme-primary/10 rounded">
|
||||
{file.type.startsWith('image/') ? (
|
||||
<Image size={14} className="text-theme-primary" />
|
||||
) : (
|
||||
<FileText size={14} className="text-theme-primary" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-700 truncate max-w-[180px]">{file.name}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFile(index);
|
||||
}}
|
||||
className="p-1 hover:bg-gray-100 rounded text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showOcrOption && (
|
||||
<label className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useOcr}
|
||||
onChange={(e) => setUseOcr(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-10 h-6 bg-gray-300 rounded-full peer-checked:bg-theme-primary transition-colors"></div>
|
||||
<div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-transform"></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ScanText size={18} className="text-gray-500" />
|
||||
<span className="text-sm font-bold text-gray-600">
|
||||
{hasImageFile && !hasDocumentFile ? 'Extract text with OCR' : 'OCR embedded images'}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex justify-between items-center text-sm font-bold text-gray-500">
|
||||
<span>Questions</span>
|
||||
<span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-lg text-xs">{questionCount}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="30"
|
||||
value={questionCount}
|
||||
onChange={(e) => setQuestionCount(Number(e.target.value))}
|
||||
className="w-full accent-theme-primary h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !canGenerate}
|
||||
className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
) : (
|
||||
<>
|
||||
{canUseAI && (
|
||||
<>
|
||||
<BrainCircuit size={24} />
|
||||
{generateMode === 'document' ? 'Generate from Document' : 'Generate Quiz'}
|
||||
<form onSubmit={handleHostSubmit} className="space-y-4">
|
||||
<div className="flex bg-gray-100 p-1.5 rounded-xl mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGenerateMode('topic')}
|
||||
className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
|
||||
generateMode === 'topic'
|
||||
? 'bg-white shadow-sm text-theme-primary'
|
||||
: 'text-gray-400 hover:text-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Sparkles size={16} /> Topic
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGenerateMode('document')}
|
||||
className={`flex-1 py-2 px-3 rounded-lg font-bold text-sm transition-all duration-200 flex items-center justify-center gap-1.5 ${
|
||||
generateMode === 'document'
|
||||
? 'bg-white shadow-sm text-theme-primary'
|
||||
: 'text-gray-400 hover:text-gray-600'
|
||||
}`}
|
||||
>
|
||||
<FileText size={16} /> Document
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{generateMode === 'topic' ? (
|
||||
<motion.div
|
||||
key="topic"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter a topic (e.g. 'Space')"
|
||||
value={topic}
|
||||
onChange={(e) => setTopic(e.target.value)}
|
||||
className="w-full p-4 text-xl font-bold border-2 border-gray-200 rounded-2xl focus:border-theme-primary focus:ring-4 focus:ring-theme-primary/20 outline-none transition-all placeholder:font-medium text-center"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="document"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={() => document.getElementById('file-upload')?.click()}
|
||||
className={`border-2 border-dashed rounded-2xl p-4 text-center cursor-pointer transition-all ${
|
||||
isDragging
|
||||
? 'border-theme-primary bg-theme-primary/5 scale-[1.02]'
|
||||
: selectedFiles.length > 0
|
||||
? 'border-theme-primary/50 bg-theme-primary/5'
|
||||
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
id="file-upload"
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
accept=".pdf,.txt,.md,.docx,.pptx,.xlsx,.odt,.odp,.ods,.rtf,.jpg,.jpeg,.png,.gif,.webp"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Upload className={`mx-auto ${isDragging ? 'text-theme-primary' : 'text-gray-400'}`} size={28} />
|
||||
<p className="text-sm font-bold text-gray-600">
|
||||
{isDragging ? 'Drop files here' : 'Drop files or click to browse'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">PDF, DOCX, PPTX, XLSX, TXT, Images</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-bold text-gray-600">{selectedFiles.length} file{selectedFiles.length > 1 ? 's' : ''} selected</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
clearAllFiles();
|
||||
}}
|
||||
className="text-xs font-bold text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-32 overflow-y-auto space-y-1.5">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-white p-2 rounded-lg shadow-sm">
|
||||
<div className="flex items-center gap-2 overflow-hidden text-left">
|
||||
<div className="p-1.5 bg-theme-primary/10 rounded">
|
||||
{file.type.startsWith('image/') ? (
|
||||
<Image size={14} className="text-theme-primary" />
|
||||
) : (
|
||||
<FileText size={14} className="text-theme-primary" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-700 truncate max-w-[180px]">{file.name}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFile(index);
|
||||
}}
|
||||
className="p-1 hover:bg-gray-100 rounded text-gray-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showOcrOption && (
|
||||
<label className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useOcr}
|
||||
onChange={(e) => setUseOcr(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-10 h-6 bg-gray-300 rounded-full peer-checked:bg-theme-primary transition-colors"></div>
|
||||
<div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full peer-checked:translate-x-4 transition-transform"></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ScanText size={18} className="text-gray-500" />
|
||||
<span className="text-sm font-bold text-gray-600">
|
||||
{hasImageFile && !hasDocumentFile ? 'Extract text with OCR' : 'OCR embedded images'}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex justify-between items-center text-sm font-bold text-gray-500">
|
||||
<span>Questions</span>
|
||||
<span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-lg text-xs">{questionCount}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="30"
|
||||
value={questionCount}
|
||||
onChange={(e) => setQuestionCount(Number(e.target.value))}
|
||||
className="w-full accent-theme-primary h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !canGenerate}
|
||||
className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<BrainCircuit size={24} />
|
||||
{generateMode === 'document' ? 'Generate from Document' : 'Generate Quiz'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="relative flex py-2 items-center opacity-50">
|
||||
<div className="flex-grow border-t-2 border-gray-300"></div>
|
||||
<span className="flex-shrink mx-4 text-gray-400 font-bold">OR</span>
|
||||
<div className="flex-grow border-t-2 border-gray-300"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="relative flex py-2 items-center opacity-50">
|
||||
<div className="flex-grow border-t-2 border-gray-300"></div>
|
||||
<span className="flex-shrink mx-4 text-gray-400 font-bold">OR</span>
|
||||
<div className="flex-grow border-t-2 border-gray-300"></div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onCreateManual}
|
||||
className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<PenTool size={20} /> Create Manually
|
||||
</button>
|
||||
<button
|
||||
onClick={onCreateManual}
|
||||
className="w-full bg-white border-2 border-theme-primary text-theme-primary py-3 rounded-2xl text-lg font-black hover:bg-theme-hover shadow-[0_4px_0_var(--theme-primary)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<PenTool size={20} /> Create Manually
|
||||
</button>
|
||||
|
||||
{auth.isAuthenticated && (
|
||||
<button
|
||||
onClick={() => setLibraryOpen(true)}
|
||||
className="w-full bg-gray-100 text-gray-600 py-3 rounded-2xl text-lg font-black hover:bg-gray-200 shadow-[0_4px_0_#d1d5db] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<BookOpen size={20} /> My Quizzes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLibraryOpen(true)}
|
||||
className="w-full bg-gray-100 text-gray-600 py-3 rounded-2xl text-lg font-black hover:bg-gray-200 shadow-[0_4px_0_#d1d5db] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<BookOpen size={20} /> My Quizzes
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -452,6 +486,26 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
|
|||
}}
|
||||
saving={savingConfig}
|
||||
/>
|
||||
|
||||
<PreferencesModal
|
||||
isOpen={preferencesOpen}
|
||||
onClose={() => setPreferencesOpen(false)}
|
||||
preferences={preferences}
|
||||
onSave={savePreferences}
|
||||
onPreview={applyColorScheme}
|
||||
saving={savingPrefs}
|
||||
/>
|
||||
|
||||
<ApiKeyModal
|
||||
isOpen={accountSettingsOpen}
|
||||
onClose={() => setAccountSettingsOpen(false)}
|
||||
apiKey={preferences.geminiApiKey}
|
||||
onSave={async (key) => {
|
||||
await savePreferences({ ...preferences, geminiApiKey: key });
|
||||
}}
|
||||
saving={savingPrefs}
|
||||
hasAIAccess={hasAIAccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue