Phase 4 complete

components/Landing.tsx

@@ -1,21 +1,36 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { BrainCircuit, Loader2, Users, Play, PenTool } from 'lucide-react';
+import { BrainCircuit, Loader2, Play, PenTool, BookOpen } from 'lucide-react';
+import { useAuth } from 'react-oidc-context';
 import { AuthButton } from './AuthButton';
+import { QuizLibrary } from './QuizLibrary';
+import { useQuizLibrary } from '../hooks/useQuizLibrary';
+import type { Quiz } from '../types';
 
 interface LandingProps {
   onGenerate: (topic: string) => void;
   onCreateManual: () => void;
+  onLoadQuiz: (quiz: Quiz) => void;
   onJoin: (pin: string, name: string) => void;
   isLoading: boolean;
   error: string | null;
 }
 
-export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, onJoin, isLoading, error }) => {
+export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, onLoadQuiz, onJoin, isLoading, error }) => {
+  const auth = useAuth();
   const [mode, setMode] = useState<'HOST' | 'JOIN'>('HOST');
   const [topic, setTopic] = useState('');
   const [pin, setPin] = useState('');
   const [name, setName] = useState('');
+  const [libraryOpen, setLibraryOpen] = useState(false);
+  
+  const { quizzes, loading: libraryLoading, error: libraryError, fetchQuizzes, loadQuiz, deleteQuiz } = useQuizLibrary();
+
+  useEffect(() => {
+    if (libraryOpen && auth.isAuthenticated) {
+      fetchQuizzes();
+    }
+  }, [libraryOpen, auth.isAuthenticated, fetchQuizzes]);
 
   const handleHostSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -27,6 +42,12 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
     if (pin.trim() && name.trim()) onJoin(pin, name);
   };
 
+  const handleLoadQuiz = async (id: string) => {
+    const quiz = await loadQuiz(id);
+    setLibraryOpen(false);
+    onLoadQuiz(quiz);
+  };
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen p-4 text-center relative">
       <div className="absolute top-4 right-4">
@@ -93,6 +114,15 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
             >
                <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>
+            )}
           </div>
         ) : (
             <form onSubmit={handleJoinSubmit} className="space-y-4">
@@ -126,6 +156,16 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
           </motion.div>
         )}
       </motion.div>
+
+      <QuizLibrary
+        isOpen={libraryOpen}
+        onClose={() => setLibraryOpen(false)}
+        quizzes={quizzes}
+        loading={libraryLoading}
+        error={libraryError}
+        onLoadQuiz={handleLoadQuiz}
+        onDeleteQuiz={deleteQuiz}
+      />
     </div>
   );
 };