Merge pull request #55 from lzaycoe/feature/task-17_nghia

update: update layout
lzaycoe · Feb 10, 2025 · d253f97 · d253f97
2 parents 50b65c6 + ac15099
commit d253f97
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 14 deletions.
diff --git a/src/app/(learners)/dashboard/page.tsx b/src/app/(learners)/dashboard/page.tsx
@@ -28,8 +28,14 @@ export default function Home() {
 		<div>
 			<Profile />
 			<NavigationBar />
-			<StatsSection />
-			<CoursesSection />
+			<div className="flex flex-col justify-center items-center w-full px-6 pb-10">
+				<div className="w-full max-w-[1245px] mb-6">
+					<StatsSection />
+				</div>
+				<div className="w-full max-w-[1245px]">
+					<CoursesSection />
+				</div>
+			</div>
 		</div>
 	);
 }
diff --git a/src/components/learners/dashboard/CourseCard.tsx b/src/components/learners/dashboard/CourseCard.tsx
@@ -5,22 +5,20 @@ import React from 'react';
 
 interface CourseCardProps {
 	title: string;
-	currentLesson: string;
 	thumbnail: string;
 	completed: string;
 }
 
 const CourseCard: React.FC<CourseCardProps> = ({
 	title,
-	currentLesson,
 	thumbnail,
 	completed,
 }) => {
 	// Kiểm tra nếu completed là "0%"
 	const isCompletedZero = completed === '0%';
 
 	return (
-		<div className="p-6 bg-white border rounded-lg shadow-md mb-0 flex flex-col justify-between h-full">
+		<div className="p-6 bg-white border rounded-lg shadow-md mb-0 flex flex-col justify-between h-full hover:shadow-2xl hover:scale-105 transition-transform transform group">
 			{/* Phần 1: Hình ảnh và nội dung */}
 			<div>
 				{/* Sử dụng Image thay cho img */}
@@ -34,8 +32,9 @@ const CourseCard: React.FC<CourseCardProps> = ({
 					/>
 				</div>
 
-				<h3 className="text-xl font-semibold text-gray-900">{title}</h3>
-				<p className="text-gray-500 mt-1">{currentLesson}</p>
+				<h3 className="text-xl font-semibold text-gray-900 line-clamp-2 group-hover:text-orange-500">
+					{title}
+				</h3>
 			</div>
 
 			{/* Phần 2: Nút và tiến độ (được đẩy xuống dưới cùng) */}
@@ -59,7 +58,7 @@ const CourseCard: React.FC<CourseCardProps> = ({
 							</div>
 						</div>
 						<button className="bg-orange-500 text-white w-full py-2 rounded-lg mt-0">
-							Watch Lecture
+							Go to Course
 						</button>
 					</div>
 				</div>

diff --git a/src/components/learners/dashboard/CoursesSection.tsx b/src/components/learners/dashboard/CoursesSection.tsx
@@ -6,35 +6,31 @@ const courses = [
 	{
 		id: 1,
 		title: 'Reiki Level I, II and Master/Teacher Program',
-		currentLesson: '1. Introductions',
 		thumbnail: '/app/course/course01.png',
 		completed: '0%',
 	},
 	{
 		id: 2,
 		title: 'The Complete 2021 Web Development Bootcamp',
-		currentLesson: "167. What You'll Need to Get Started",
 		thumbnail: '/app/course/course02.png',
 		completed: '61%',
 	},
 	{
 		id: 3,
 		title: 'Copywriting - Become a Freelance Copywriter',
-		currentLesson: '1. How to get started with figma',
 		thumbnail: '/app/course/course03.png',
 		completed: '0%',
 	},
 	{
 		id: 4,
 		title: '2021 Complete Python Bootcamp From Zero to Mastery',
-		currentLesson: '9. Advanced CSS - Selector Priority',
 		thumbnail: '/app/course/course04.png',
 		completed: '12%',
 	},
 ];
 
 const CoursesSection = () => (
-	<div className="bg-white p-6 rounded-lg shadow-md">
+	<div className="bg-white p-6 rounded-lg shadow-md max-w-7xl mt-10">
 		<h2 className="text-2xl font-semibold">Lets start learning</h2>
 		<div className="grid grid-cols-4 gap-6 mt-4">
 			{courses.map((course) => (

diff --git a/src/components/learners/dashboard/StatsSection.tsx b/src/components/learners/dashboard/StatsSection.tsx
@@ -38,7 +38,7 @@ const stats = [
 ];
 
 const StatsSection = () => (
-	<div className="bg-white p-6 rounded-lg shadow-md">
+	<div className="bg-white p-6 rounded-lg shadow-md max-w-7xl mt-10">
 		<div className="grid grid-cols-4 gap-6">
 			{stats.map((stat) => (
 				<Stat