Skip to content

Commit 98e9e3f

Browse files
Angee-webAngee-web
committed
refactor: Update CourseCard component and import paths
Refactor the CourseCard component to include a new prop `onStartCourse` and update the import paths for the `Course` type. This change allows for starting a course when the "Start Course" button is clicked. Refactored the mockData to generate user progress. Added a type.ts file
1 parent fd5aa0e commit 98e9e3f

4 files changed

Lines changed: 60 additions & 117 deletions

File tree

‎components/Course/CourseCard.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11

22
import React from "react";
3-
import { Course } from "./mock";
3+
import { Course } from "./type";
44

5-
const CourseCard = ({ course }: { course: Course }) => {
5+
interface CourseCardProps {
6+
course: Course;
7+
onStartCourse: (courseId: number) => void; // Change to number to match your mock data
8+
}
9+
10+
const CourseCard: React.FC<CourseCardProps> = ({ course, onStartCourse }) => {
611
return (
712
<div
813
className={`rounded-lg p-6 shadow-md ${course.featured ? "bg-orange-100 dark:bg-orange-900" : "bg-gray-100 dark:bg-gray-800"}`}
@@ -24,7 +29,10 @@ const CourseCard = ({ course }: { course: Course }) => {
2429
</div>
2530

2631
{/* Start Course Button */}
27-
<button className="mt-4 rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600">
32+
<button
33+
className="mt-4 rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600"
34+
onClick={() => onStartCourse(Number(course.id))} // Call the passed function with course ID
35+
>
2836
Start Course
2937
</button>
3038
</div>

‎components/Course/index.tsx‎

Lines changed: 17 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,29 @@
11

22
import React from "react";
3-
import { mockCourses, userProgress } from "./mock";
4-
import CourseCard from "./CourseCard";
3+
import { mockCourses, userProgress } from "./mock";
4+
import CourseCard from "./CourseCard";
55
import { type Session } from "next-auth";
66

77
const CoursesLanding = ({ session }: { session: Session | null }) => {
8-
// Assuming feature flag is always enabled for simplicity
9-
const userLatestProgress = userProgress.coursesProgress[0];
8+
const handleStartCourse = (courseId: number) => {
9+
console.log(`Starting course with ID: ${courseId}`);
10+
// Add logic here to navigate to the course content page or start the course
11+
};
1012

1113
return (
12-
<div className="flex min-h-screen flex-col px-4 py-8 dark:bg-gray-900 dark:text-white lg:px-16 lg:py-12">
14+
<div className="flex min-h-screen flex-col gap-8 px-4 py-8 dark:bg-gray-900 dark:text-white lg:px-16 lg:py-12">
1315
{/* Page Title */}
14-
<h1 className="mb-8 text-3xl font-bold lg:text-4xl">Courses</h1>
16+
<h1 className="mb-6 text-3xl font-bold lg:text-4xl">Courses</h1>
1517

16-
{/* Layout with two columns on desktop */}
17-
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
18-
{/* Left side: Courses */}
19-
<div className="lg:col-span-2">
20-
{mockCourses.map((course) => (
21-
<CourseCard key={course.id} course={course} />
22-
))}
23-
</div>
24-
25-
{/* Right side: Advert & Latest Progress */}
26-
<div className="lg:col-span-1">
27-
{/* Featured Advert */}
28-
<div className="mb-8 rounded-lg bg-gray-100 p-6 shadow-lg dark:bg-gray-800">
29-
<h2 className="mb-4 text-xl font-bold">Featured Advert</h2>
30-
{/* Add an image or component for an ad here */}
31-
<div className="flex h-40 items-center justify-center rounded bg-gray-200 dark:bg-gray-700">
32-
Advert Content
33-
</div>
34-
</div>
35-
36-
{/* Latest Progress */}
37-
<div className="rounded-lg bg-gray-100 p-6 shadow-lg dark:bg-gray-800">
38-
<h2 className="mb-4 text-xl font-bold">Latest Progress</h2>
39-
<div className="flex items-center gap-4">
40-
<div className="flex-shrink-0">
41-
<svg className="h-20 w-20">
42-
<circle
43-
cx="50"
44-
cy="50"
45-
r="40"
46-
className="text-gray-300 dark:text-gray-600"
47-
strokeWidth="10"
48-
fill="transparent"
49-
/>
50-
<circle
51-
cx="50"
52-
cy="50"
53-
r="40"
54-
className="text-pink-500"
55-
strokeWidth="10"
56-
fill="transparent"
57-
style={{
58-
strokeDasharray: "251",
59-
strokeDashoffset: `calc(251 - (251 * ${userLatestProgress.progress}) / 100)`,
60-
}}
61-
/>
62-
</svg>
63-
</div>
64-
<div>
65-
<p className="text-lg font-bold">
66-
{userLatestProgress.courseTitle}
67-
</p>
68-
<p className="text-lg">
69-
{userLatestProgress.progress}% Complete
70-
</p>
71-
</div>
72-
</div>
73-
</div>
74-
</div>
18+
{/* Courses List */}
19+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
20+
{mockCourses.map((course) => (
21+
<CourseCard
22+
key={course.id}
23+
course={course}
24+
onStartCourse={handleStartCourse}
25+
/>
26+
))}
7527
</div>
7628
</div>
7729
);

‎components/Course/mock.ts‎

Lines changed: 25 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,54 @@
1-
2-
3-
export interface Course {
4-
id: string;
5-
title: string;
6-
description: string;
7-
progress: number;
8-
featured: boolean;
9-
}
10-
1+
import { Course } from "./type";
112

123
export const mockCourses: Course[] = [
134
{
14-
id: "1",
5+
id: "1",
156
title: "Introduction to Web Development",
167
description:
178
"Learn the basics of HTML, CSS, and JavaScript to build responsive websites.",
189
progress: 90,
19-
featured: true,
10+
featured: true,
2011
},
2112
{
22-
id: "2",
13+
id: "2",
2314
title: "Advanced JavaScript Concepts",
2415
description:
25-
"Master advanced JavaScript concepts, including closures, promises, async/await, and more.",
16+
"Deep dive into JavaScript with advanced concepts and techniques.",
2617
progress: 65,
27-
featured: false,
18+
featured: false,
2819
},
2920
{
30-
id: "3",
21+
id: "3",
3122
title: "React for Beginners",
32-
description:
33-
"Get started with React, building modern web apps using components, hooks, and state management.",
23+
description: "Get started with React and build interactive UIs.",
3424
progress: 30,
35-
featured: false,
25+
featured: false,
3626
},
3727
{
38-
id: "4",
28+
id: "4",
3929
title: "Full-Stack Web Development",
4030
description:
41-
"Learn full-stack development with Node.js, Express, MongoDB, and React.",
31+
"Become a full-stack developer by learning both front-end and back-end technologies.",
4232
progress: 45,
43-
featured: true,
33+
featured: true,
4434
},
4535
{
46-
id: "5",
36+
id: "5",
4737
title: "Version Control with Git and GitHub",
4838
description:
49-
"Understand version control, Git, and how to collaborate on projects using GitHub.",
39+
"Learn how to use Git for version control and GitHub for collaboration.",
5040
progress: 80,
51-
featured: false,
41+
featured: false,
5242
},
5343
];
5444

55-
export const userProgress = {
56-
coursesProgress: [
57-
{
58-
courseTitle: 'Introduction to Web Development',
59-
progress: 90,
60-
},
61-
{
62-
courseTitle: 'Advanced JavaScript Concepts',
63-
progress: 65,
64-
},
65-
{
66-
courseTitle: 'React for Beginners',
67-
progress: 30,
68-
},
69-
{
70-
courseTitle: 'Full-Stack Web Development',
71-
progress: 45,
72-
},
73-
{
74-
courseTitle: 'Version Control with Git and GitHub',
75-
progress: 80,
76-
},
77-
],
78-
};
45+
// Function to generate user progress from courses
46+
export const generateUserProgress = (courses: Course[]) => ({
47+
coursesProgress: courses.map((course) => ({
48+
courseId: course.id,
49+
progress: course.progress,
50+
featured: course.featured,
51+
})),
52+
});
53+
54+
export const userProgress = generateUserProgress(mockCourses);

‎components/Course/type.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface Course {
2+
id: string;
3+
title: string;
4+
description: string;
5+
progress: number;
6+
featured: boolean;
7+
}

0 commit comments

Comments
 (0)