feat: implement micro-learning system with content delivery components, completion tracking hooks, and database schema migrations

src/components/micro_learning/ConceptExplainer.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; // assuming some UI library, otherwise use standard divs
+
+export default function ConceptExplainer({ content, onComplete }) {
+  const containerRef = useRef(null);
+
+  // Trigger completion when scrolled to the end
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+      if (scrollTop + clientHeight >= scrollHeight - 50) {
+        onComplete();
+      }
+    };
+    
+    // Check initially in case content is short and doesn't need scrolling
+    if (containerRef.current && containerRef.current.scrollHeight <= containerRef.current.clientHeight) {
+      onComplete();
+    }
+
+    const currentRef = containerRef.current;
+    currentRef?.addEventListener('scroll', handleScroll);
+    return () => currentRef?.removeEventListener('scroll', handleScroll);
+  }, [onComplete]);
+
+  return (
+    <Card className="w-full h-[60vh] flex flex-col">
+      <CardHeader>
+        <CardTitle>Concept Explainer</CardTitle>
+      </CardHeader>
+      <CardContent 
+        className="flex-1 overflow-y-auto prose dark:prose-invert"
+        ref={containerRef}
+      >
+        {content?.sections?.map((section, i) => (
+          <div key={i} className="mb-6">
+            <h3>{section.title}</h3>
+            <div dangerouslySetInnerHTML={{ __html: section.content }} />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}