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/LessonPage.tsx
+10 -10
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { ArrowLeft, Calendar, Clock, MapPin, Edit, Trash2, Users, BookOpen, FileText, CheckCircle, XCircle } from 'lucide-react';
import { AccessTimeIcon, ArrowBackIcon, CalendarTodayIcon, CancelIcon, CheckCircleIcon, DeleteIcon, DescriptionIcon, EditIcon, LocationOnIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext';
import { format, parseISO } from 'date-fns';
@@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
to={`/timetable/timetables/${currentTimetable?.id}`}
className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2"
>
<ArrowLeft size={16} className="mr-1" />
<ArrowBackIcon size={16} className="mr-1" />
Back to Timetable
</Link>
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
@@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
onClick={() => setIsEditModalOpen(true)}
className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
<Edit size={16} className="mr-2" />
<EditIcon size={16} className="mr-2" />
Edit
</button>
<button
onClick={handleDeleteLesson}
className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
>
<Trash2 size={16} className="mr-2" />
<DeleteIcon size={16} className="mr-2" />
Delete
</button>
</div>
@@ -151,12 +151,12 @@ const LessonPage: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<Clock size={20} className="mr-2 text-blue-600" />
<AccessTimeIcon size={20} className="mr-2 text-blue-600" />
Time & Location
</h2>
<div className="space-y-3">
<div className="flex items-start gap-3">
<Calendar size={18} className="text-gray-400 mt-0.5" />
<CalendarTodayIcon size={18} className="text-gray-400 mt-0.5" />
<div>
<p className="font-medium text-gray-900">Date</p>
<p className="text-gray-600">
@@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
</div>
</div>
<div className="flex items-start gap-3">
<Clock size={18} className="text-gray-400 mt-0.5" />
<AccessTimeIcon size={18} className="text-gray-400 mt-0.5" />
<div>
<p className="font-medium text-gray-900">Time</p>
<p className="text-gray-600">
@@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
</div>
{(currentLesson.location || currentLesson.room) && (
<div className="flex items-start gap-3">
<MapPin size={18} className="text-gray-400 mt-0.5" />
<LocationOnIcon size={18} className="text-gray-400 mt-0.5" />
<div>
<p className="font-medium text-gray-900">Location</p>
<p className="text-gray-600">
@@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<BookOpen size={20} className="mr-2 text-green-600" />
<MenuBookIcon size={20} className="mr-2 text-green-600" />
Class Information
</h2>
<div className="space-y-3">
@@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900 flex items-center">
<Users size={20} className="mr-2 text-purple-600" />
<PeopleIcon size={20} className="mr-2 text-purple-600" />
Attendance
</h2>
</div>