fixes and architecture

2026-08-28 16:25:37 -05:00
1 parent ce98f270d5
commit dd43fa04c1
@@ -0,0 +1,100 @@
+"use client";
+import { useRef } from "react";
+import { useRouter } from "next/navigation";
+import { FiStar, FiShoppingCart, FiCheck } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { useCart } from "@/context/CartContext";
+import type { Course } from "@/types/course";
+
+export function ListCourseCard({ course }: { course: Course }) {
+  const { isDark } = useTheme();
+  const { addToCart, isInCart: isInCartFn } = useCart();
+  const isInCart = isInCartFn(course.id);
+  const router = useRouter();
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const discountPercent = Math.round(
+    ((course.originalPrice - course.price) / course.originalPrice) * 100,
+  );
+
+  return (
+    <div
+      className={`flex gap-4 rounded-2xl border p-4 transition-all hover:-translate-y-0.5 ${
+        isDark
+          ? "bg-slate-900/90 border-slate-800 hover:border-slate-700"
+          : "bg-white border-slate-200 hover:border-slate-300 hover:shadow-md"
+      }`}
+    >
+      <img
+        src={course.thumbnail}
+        alt={course.title}
+        onClick={() => router.push(`/course/${course.id}`)}
+        className="w-40 h-24 rounded-xl object-cover shrink-0 cursor-pointer"
+      />
+      <div className="flex-1 min-w-0 flex flex-col justify-between">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`text-[10px] font-bold uppercase tracking-wider ${isDark ? "text-violet-400" : "text-violet-600"}`}>
+              {course.category}
+            </span>
+            {course.badge && (
+              <span className="text-[10px] font-black px-2 py-0.5 rounded bg-amber-500 text-slate-950">
+                {course.badge}
+              </span>
+            )}
+          </div>
+          <h3
+            onClick={() => router.push(`/course/${course.id}`)}
+            className={`text-sm font-bold line-clamp-1 cursor-pointer hover:text-violet-400 transition-colors ${isDark ? "text-white" : "text-slate-900"}`}
+          >
+            {course.title}
+          </h3>
+          <p className={`text-xs line-clamp-1 mt-0.5 ${isDark ? "text-slate-400" : "text-slate-500"}`}>
+            {course.subtitle}
+          </p>
+          <div className="flex items-center gap-3 mt-2 text-xs">
+            <span className="flex items-center gap-1 font-bold text-amber-400">
+              <FiStar className="fill-amber-400" /> {course.rating.toFixed(1)}
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              ({course.reviewsCount.toLocaleString()})
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              {course.studentsCount.toLocaleString()} alumnos
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              {course.duration}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-end justify-between shrink-0">
+        <div className="text-right">
+          <div className={`text-lg font-black font-mono ${isDark ? "text-white" : "text-slate-900"}`}>
+            ${course.price.toFixed(2)}
+          </div>
+          {discountPercent > 0 && (
+            <div className={`text-xs line-through font-mono ${isDark ? "text-slate-500" : "text-slate-400"}`}>
+              ${course.originalPrice.toFixed(2)}
+            </div>
+          )}
+        </div>
+        <button
+          ref={btnRef}
+          onClick={() => !isInCart && addToCart(course, btnRef.current)}
+          disabled={isInCart}
+          className={`px-3 py-2 rounded-xl text-xs font-bold flex items-center gap-1.5 transition-all ${
+            isInCart
+              ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 cursor-default"
+              : "bg-violet-600 hover:bg-violet-500 text-white hover:scale-105 active:scale-95"
+          }`}
+        >
+          {isInCart ? (
+            <><FiCheck /><span>En carrito</span></>
+          ) : (
+            <><FiShoppingCart /><span>Añadir</span></>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}