feat: implement AI-driven learning content generation service and interactive student dashboard

src/pages/Leren.jsx

@@ -68,12 +68,12 @@ const Leren = () => {
     }
   };
 
-  const loadContent = async () => {
+  const loadContent = async (selectedType = 'article') => {
     if (!activeTopic) return;
     setIsLoading(true);
     setError(null);
     try {
-      const generated = await generateLearningContent(activeTopic);
+      const generated = await generateLearningContent(activeTopic, false, selectedType);
       setContent(generated);
     } catch (e) {
       setError(e.message);
@@ -220,8 +220,13 @@ const Leren = () => {
         {!content && !isLoading && (
           <Card className="border border-bg-warm text-center py-16">
             <BookOpen size={48} className="mx-auto text-teal/30 mb-4" />
-            <p className="text-fg-muted mb-6">Click the button to generate personalized AI learning content for this topic.</p>
-            <Button onClick={loadContent}>Generate Learning Content</Button>
+            <p className="text-fg-muted mb-6">Choose how you want to learn this topic.</p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <Button onClick={() => loadContent('article')}>Article</Button>
+              <Button onClick={() => loadContent('slides')}>Slides</Button>
+              <Button onClick={() => loadContent('podcast')}>Podcast</Button>
+              <Button onClick={() => loadContent('infographic')}>Infographic</Button>
+            </div>
           </Card>
         )}
 
@@ -241,7 +246,7 @@ const Leren = () => {
           </Card>
         )}
 
-        {content && <LearningContentViewer content={content} topic={activeTopic} />}
+        {content && <LearningContentViewer content={content} topic={activeTopic} onGenerate={loadContent} isLoading={isLoading} />}
 
         {content && (
           <div className="mt-10 pt-6 border-t border-bg-warm flex justify-end">