101 lines
4.0 KiB
TypeScript
101 lines
4.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|