46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
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>
|
|
);
|
|
}
|