46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { MatchSentenceExerciseOption } from "@/interfaces/exam";
|
|
import { MdVisibilityOff } from "react-icons/md";
|
|
|
|
interface Props {
|
|
showReference: boolean;
|
|
selectedReference: string | null;
|
|
options: MatchSentenceExerciseOption[];
|
|
headings: boolean;
|
|
setShowReference: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
const ReferenceViewer: React.FC<Props> = ({ showReference, selectedReference, options, setShowReference, headings = true}) => (
|
|
<div
|
|
className={`fixed inset-y-0 right-0 w-96 bg-white shadow-lg transform transition-transform duration-300 z-50 ease-in-out ${showReference ? 'translate-x-0' : 'translate-x-full'}`}
|
|
>
|
|
<div className="h-full flex flex-col">
|
|
<div className="p-4 border-b bg-gray-50 flex justify-between items-center">
|
|
<h3 className="font-semibold text-gray-800">{headings ? "Reference Paragraphs" : "Authors"}</h3>
|
|
<button
|
|
onClick={() => setShowReference(false)}
|
|
className="p-2 hover:bg-gray-200 rounded-full"
|
|
>
|
|
<MdVisibilityOff size={20} />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<div className="space-y-4">
|
|
{options.map((option) => (
|
|
<Card key={option.id} className={`bg-gray-50 transition-all duration-200 ${selectedReference === option.id ? 'ring-2 ring-blue-500' : ''}`}>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-md text-black">{headings ? "Paragraph" : "Author" } {option.id}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-gray-600">{option.sentence}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ReferenceViewer;
|