info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-25 00:21:28 +02:00
Code Issues Releases Wiki Activity

refactor: update the course card

Browse Source
This commit is contained in:
Arik Chakma
2025-06-18 14:03:24 +06:00
parent 9821a2e212
commit d3a5fd7c5f
1 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/GenerateCourse/AICourseCard.tsx
View File

@@ -2,6 +2,7 @@ import type { AICourseWithLessonCount } from '../../queries/ai-course';
import type { DifficultyLevel } from './AICourse';
import { BookOpen } from 'lucide-react';
import { AICourseActions } from './AICourseActions';
import { getRelativeTimeString } from '../../lib/date';
type AICourseCardProps = {
course: AICourseWithLessonCount;
@@ -12,7 +13,6 @@ type AICourseCardProps = {
export function AICourseCard(props: AICourseCardProps) {
const { course, showActions = true, showProgress = true } = props;
// Map difficulty to color
const difficultyColor =
{
beginner: 'text-green-700',
@@ -20,17 +20,18 @@ export function AICourseCard(props: AICourseCardProps) {
advanced: 'text-purple-700',
}[course.difficulty as DifficultyLevel] || 'text-gray-700';
// Calculate progress percentage
const modulesCount = course.modules?.length || 0;
const totalTopics = course.lessonCount || 0;
const completedTopics = course.done?.length || 0;
const progressPercentage =
totalTopics > 0 ? Math.round((completedTopics / totalTopics) * 100) : 0;
const updatedAgo = getRelativeTimeString(course?.updatedAt);
return (
<div className="relative flex flex-grow flex-col">
<a
href={`/ai/${course.slug}`}
className="hover:border-gray-3 00 group relative flex h-full min-h-[140px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
className="hover:border-gray-3 00 group relative flex h-full min-h-[300px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
>
<div className="flex items-center justify-between">
<span
@@ -40,29 +41,49 @@ export function AICourseCard(props: AICourseCardProps) {
</span>
</div>
<h3 className="my-2 text-base font-semibold text-gray-900">
<h3 className="my-2 text-base font-semibold text-balance text-gray-900">
{course.title}
</h3>
<div className="mt-auto flex items-center justify-between pt-2">
<div className="flex items-center gap-2 pt-2">
<div className="flex items-center text-xs text-gray-600">
<BookOpen className="mr-1 h-3.5 w-3.5" />
<span>{modulesCount} modules</span>
</div>
<span className="text-xs text-gray-600">•</span>
<div className="flex items-center text-xs text-gray-600">
<BookOpen className="mr-1 h-3.5 w-3.5" />
<span>{totalTopics} lessons</span>
</div>
</div>
{showProgress && totalTopics > 0 && (
<div className="flex items-center">
<div className="mr-2 h-1.5 w-16 overflow-hidden rounded-full bg-gray-200">
{showProgress && totalTopics > 0 && (
<div className="mt-auto">
<div className="flex items-center justify-between gap-2">
<span className="text-xs text-gray-600">Progress</span>
<span className="text-xs font-medium text-gray-700">
{progressPercentage}%
</span>
</div>
<div className="mt-2.5 flex items-center">
<div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
<div
className="h-full rounded-full bg-blue-600"
style={{ width: `${progressPercentage}%` }}
/>
</div>
<span className="text-xs font-medium text-gray-700">
{progressPercentage}%
</span>
</div>
)}
</div>
)}
<div className="mt-4 flex items-center justify-between gap-2">
<span className="text-xs text-gray-600">
Last updated {updatedAgo}
</span>
</div>
</a>