ClassroomCopilot/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): replace lucide-react with @mui/icons-material

Browse Source 
Replace lucide-react icon imports with @mui/icons-material equivalents
across all timetable pages and common Modal component.

Icons replaced:
- lucide-react Check, X, UserPlus, Users, Filter, Search -> MUI equivalents
- lucide-react ChevronDown, ChevronLeft, ChevronRight -> MUI equivalents
- lucide-react BookOpen, Clock, GraduationCap, School -> MUI equivalents
- lucide-react Calendar, MapPin, Edit, Trash2, Plus -> MUI equivalents
- lucide-react ArrowLeft, FileText, CheckCircle, XCircle -> MUI equivalents

Fixes build error: Failed to resolve import 'lucide-react'
This commit is contained in:
Agent Zero
2026-02-26 07:06:11 +00:00
parent a64836c94a
commit c7207eb805
7 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/timetable/MyClassesPage.tsx
+10 -10
View File
@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { BookOpen, Users, Clock, ChevronRight, GraduationCap, School } from 'lucide-react';
import { AccessTimeIcon, KeyboardArrowRightIcon, MenuBookIcon, PeopleIcon, SchoolIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext';
@@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
{teachingClasses.length > 0 && (
<div className="mb-8">
<div className="flex items-center gap-2 mb-4">
<GraduationCap className="text-purple-600" size={24} />
<SchoolIcon className="text-purple-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Teaching</h2>
<span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
{teachingClasses.length}
@@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p>
)}
</div>
<ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
<KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2">
@@ -120,12 +120,12 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1">
<Users size={14} />
<PeopleIcon size={14} />
<span>{classItem.class?.enrolled_count || 0} students</span>
</div>
{classItem.class?.academic_year && (
<div className="flex items-center gap-1">
<School size={14} />
<SchoolIcon size={14} />
<span>{classItem.class.academic_year}</span>
</div>
)}
@@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
{enrolledClasses.length > 0 && (
<div className="mb-8">
<div className="flex items-center gap-2 mb-4">
<BookOpen className="text-green-600" size={24} />
<MenuBookIcon className="text-green-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Enrolled</h2>
<span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
{enrolledClasses.length}
@@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p>
)}
</div>
<ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
<KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2">
@@ -180,14 +180,14 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1">
<GraduationCap size={14} />
<SchoolIcon size={14} />
<span>
{classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
</span>
</div>
{classItem.class?.academic_year && (
<div className="flex items-center gap-1">
<School size={14} />
<SchoolIcon size={14} />
<span>{classItem.class.academic_year}</span>
</div>
)}
@@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
{/* Empty State */}
{myClasses.length === 0 && (
<div className="text-center py-16">
<BookOpen className="mx-auto h-12 w-12 text-gray-300" />
<MenuBookIcon className="mx-auto h-12 w-12 text-gray-300" />
<h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3>
<p className="mt-2 text-gray-500">
You are not enrolled in or teaching any classes yet.