73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Problem, TutorResponse } from '../types';
|
|
import { getTutorExplanation } from '../services/geminiService';
|
|
import { Bot, Loader2, X } from 'lucide-react';
|
|
import { Button } from './Button';
|
|
|
|
interface TutorModalProps {
|
|
problem: Problem;
|
|
onClose: () => void;
|
|
isOpen: boolean;
|
|
}
|
|
|
|
export const TutorModal: React.FC<TutorModalProps> = ({ problem, onClose, isOpen }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState<TutorResponse | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && problem) {
|
|
setLoading(true);
|
|
getTutorExplanation(problem)
|
|
.then(setData)
|
|
.finally(() => setLoading(false));
|
|
}
|
|
}, [isOpen, problem]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in duration-200">
|
|
<div className="bg-indigo-600 p-4 flex items-center justify-between text-white">
|
|
<div className="flex items-center gap-2">
|
|
<Bot />
|
|
<span className="font-bold text-lg">Math Coach</span>
|
|
</div>
|
|
<button onClick={onClose} className="hover:bg-indigo-500 p-1 rounded">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="text-center mb-6">
|
|
<p className="text-slate-500 text-sm uppercase tracking-wide font-bold mb-1">The problem was</p>
|
|
<div className="text-4xl font-black text-slate-800">
|
|
{problem.a} {problem.operator} {problem.b} = <span className="text-red-500">{problem.answer}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-8 text-indigo-500">
|
|
<Loader2 className="animate-spin mb-2" size={32} />
|
|
<p>Thinking...</p>
|
|
</div>
|
|
) : data ? (
|
|
<div className="space-y-4">
|
|
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
|
|
<p className="text-indigo-900 font-medium leading-relaxed">{data.explanation}</p>
|
|
</div>
|
|
<p className="text-center text-slate-500 italic">"{data.encouragement}"</p>
|
|
</div>
|
|
) : (
|
|
<p className="text-red-500 text-center">Could not load explanation.</p>
|
|
)}
|
|
|
|
<div className="mt-8">
|
|
<Button onClick={onClose} className="w-full">Got it!</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|