initial push

src/components/app/module-card.tsx

@@ -0,0 +1,41 @@
+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>
+  );
+}