@defikitdotnet/education-module-ai
Version:
AI Education Module using Agent Framework
31 lines (30 loc) • 3.62 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CourseCard = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var link_1 = __importDefault(require("next/link"));
var CourseCard = function (_a) {
var course = _a.course, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.isEnrolled, isEnrolled = _c === void 0 ? false : _c, _d = _a.progress, progress = _d === void 0 ? 0 : _d, href = _a.href, onClick = _a.onClick;
var defaultThumbnail = "/images/course-default.jpg";
// Format the course level to be more readable
var formatLevel = function (level) {
return level.charAt(0).toUpperCase() + level.slice(1);
};
var handleImageError = function (e) {
var imgElement = e.target;
// Only set to default if the src is not already the default path
if (imgElement.src !== "".concat(window.location.origin).concat(defaultThumbnail)) {
imgElement.src = defaultThumbnail;
// Optionally, remove the error handler to prevent further triggers for this specific image
// imgElement.onerror = null;
}
};
var cardContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative h-40 w-full bg-gray-100 rounded-t-lg flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: course.thumbnail || defaultThumbnail, alt: course.title, className: "absolute inset-0 w-full h-full object-cover rounded-t-lg" // Maintain styling
, onError: handleImageError, loading: "lazy" // Add lazy loading
}), isEnrolled && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-gray-200 h-2 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-success-500 h-full rounded-full", style: { width: "".concat(progress, "%") } }) }), (0, jsx_runtime_1.jsxs)("p", { className: "text-white text-xs mt-1 text-right", children: [progress, "% complete"] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-800 line-clamp-2 mb-1", children: course.title }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 text-sm text-gray-500 mb-2", children: (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-1 bg-primary-100 text-primary-800 rounded-full text-xs font-medium", children: formatLevel(course.level) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 text-sm line-clamp-3 mb-4", children: course.description || "No description available" }), isEnrolled ? ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary w-full", onClick: onClick, children: "Continue Learning" })) : ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline w-full", onClick: onClick, children: "View Course" }))] })] }));
return ((0, jsx_runtime_1.jsx)("div", { className: "card hover:shadow-lg transition-shadow overflow-hidden ".concat(className), children: href ? ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, className: "block h-full", children: cardContent })) : ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: "cursor-pointer h-full", children: cardContent })) }));
};
exports.CourseCard = CourseCard;