42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
|
|
type ModuleCardProps = {
|
|
name: string;
|
|
completion: number;
|
|
status: "Completado" | "En curso" | "Pendiente";
|
|
href: string;
|
|
answeredQuestions: number;
|
|
totalQuestions: number;
|
|
};
|
|
|
|
export function ModuleCard({ name, completion, status, href, answeredQuestions, totalQuestions }: ModuleCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h3 className="text-base font-semibold text-[#22314b]">{name}</h3>
|
|
<Badge variant={status === "Completado" ? "success" : status === "En curso" ? "warning" : "neutral"}>{status}</Badge>
|
|
</div>
|
|
|
|
<Progress value={completion} showValue />
|
|
|
|
<p className="text-sm text-[#5f6d86]">
|
|
{answeredQuestions}/{totalQuestions} preguntas respondidas
|
|
</p>
|
|
|
|
<div className="flex justify-end">
|
|
<Link href={href}>
|
|
<Button size="sm" variant="secondary">
|
|
{completion >= 100 ? "Revisar" : completion > 0 ? "Continuar" : "Iniciar"}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|