info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-25 08:35:42 +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

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

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