fix: ui for teacher profile view

lzaycoe · Feb 10, 2025 · 50f1c7f · 50f1c7f
1 parent 5e5d147
commit 50f1c7f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/src/components/learners/home/CourseCard.tsx b/src/components/learners/home/CourseCard.tsx
@@ -22,6 +22,7 @@ interface CourseCardProps {
 	title: string;
 	rating: string;
 	students: string;
+	maxWidth?: string;
 }
 
 const CourseCard: React.FC<CourseCardProps> = ({
@@ -33,9 +34,12 @@ const CourseCard: React.FC<CourseCardProps> = ({
 	title,
 	rating,
 	students,
+	maxWidth = 'max-w-[244px]',
 }) => {
 	return (
-		<Card className="flex flex-col justify-center bg-white max-w-[244px] transition-transform transform hover:scale-105 cursor-pointer group hover:shadow-2xl">
+		<Card
+			className={`flex flex-col justify-center bg-white ${maxWidth} transition-transform transform hover:scale-105 cursor-pointer group hover:shadow-2xl`}
+		>
 			<Image
 				loading="lazy"
 				src={imageUrl}
@@ -50,7 +54,7 @@ const CourseCard: React.FC<CourseCardProps> = ({
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div
-									className={`gap-2.5 self-stretch px-1.5 py-1 my-auto text-xs font-medium leading-tight uppercase ${categoryBgColor} ${categoryTextColor} truncate min-w-[50px] max-w-[100px]`}
+									className={`gap-2.5 self-stretch px-1.5 py-1 my-auto text-xs font-medium leading-tight uppercase ${categoryBgColor} ${categoryTextColor} truncate min-w-[50px] max-w-[300px]`}
 								>
 									{category}
 								</div>

diff --git a/src/components/learners/teacher-profile/CoursesSection.tsx b/src/components/learners/teacher-profile/CoursesSection.tsx
@@ -132,6 +132,48 @@ import CourseCard from '@/components/learners/home/CourseCard';
  *  ======================================================================
  */
 
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+
 interface CommentProps {
 	name: string;
 	profileImage: string;
@@ -314,21 +356,21 @@ const CourseSection: React.FC = () => {
 			role="region"
 			aria-label="Course and Student Feedback Section"
 		>
-			<nav className="flex pr-20 text-base font-medium leading-none text-center whitespace-nowrap max-w-[872px] max-md:pr-5">
+			<nav className="flex text-base font-medium leading-none text-center whitespace-nowrap max-w-[872px] max-md:pr-5">
 				<button
 					className={`gap-2.5 self-stretch py-5 bg-white shadow-sm text-neutral-800 w-[200px] ${activeTab === 'courses' ? 'border-b-2 border-orange-500' : ''}`}
 					onClick={() => setActiveTab('courses')}
 				>
 					Courses
 				</button>
-				<hr className="self-start mt-16 mr-0 w-full bg-gray-200 border border-gray-200 border-solid min-h-px max-md:mt-10 max-md:max-w-full" />
 				<button
 					className={`gap-2.5 self-stretch py-5 text-gray-600 w-[200px] ${activeTab === 'reviews' ? 'border-b-2 border-orange-500' : ''}`}
 					onClick={() => setActiveTab('reviews')}
 				>
 					Review
 				</button>
 			</nav>
+			<hr className="self-start mr-0 w-full bg-gray-200 border border-gray-200 border-solid min-h-px max-md:mt-10 max-md:max-w-full" />
 
 			{activeTab === 'courses' && (
 				<h1 className="text-2xl font-bold text-neutral-800 mt-6 mb-6">
@@ -337,9 +379,9 @@ const CourseSection: React.FC = () => {
 			)}
 
 			{activeTab === 'courses' && (
-				<div className="grid grid-cols-4 gap-4 w-full max-md:grid-cols-1">
+				<div className="grid grid-cols-2 gap-4 w-full max-md:grid-cols-1">
 					{courses.map((course, index) => (
-						<CourseCard key={index} {...course} />
+						<CourseCard key={index} {...course} maxWidth="max-w-[544px]" />
 					))}
 				</div>
 			)}