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/ClassesPage.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Plus, Search, Filter, BookOpen, Users, Calendar } from 'lucide-react';
import { AddIcon, CalendarTodayIcon, FilterListIcon, MenuBookIcon, PeopleIcon, SearchIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext';
@@ -70,7 +70,7 @@ const ClassesPage: React.FC = () => {
onClick={() => navigate('/timetable/classes/create')}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Plus size={20} />
<AddIcon size={20} />
Create Class
</button>
)}
@@ -80,7 +80,7 @@ const ClassesPage: React.FC = () => {
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
<input
type="text"
placeholder="Search classes by name or subject..."
@@ -94,7 +94,7 @@ const ClassesPage: React.FC = () => {
onClick={() => setShowFilters(!showFilters)}
className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
<Filter size={20} />
<FilterListIcon size={20} />
Filters
</button>
<button
@@ -172,7 +172,7 @@ const ClassesPage: React.FC = () => {
</div>
) : classes.length === 0 ? (
<div className="text-center py-12 bg-gray-50 rounded-xl">
<BookOpen className="mx-auto h-12 w-12 text-gray-400 mb-4" />
<MenuBookIcon className="mx-auto h-12 w-12 text-gray-400 mb-4" />
<h3 className="text-lg font-medium text-gray-900">No classes found</h3>
<p className="text-gray-600 mt-1">
{searchQuery || filterSubject || filterSchoolYear
@@ -191,7 +191,7 @@ const ClassesPage: React.FC = () => {
>
<div className="flex items-start justify-between mb-4">
<div className="p-2 bg-blue-50 rounded-lg">
<BookOpen className="text-blue-600" size={24} />
<MenuBookIcon className="text-blue-600" size={24} />
</div>
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
{cls.subject}
@@ -203,11 +203,11 @@ const ClassesPage: React.FC = () => {
</p>
<div className="flex items-center gap-4 text-sm text-gray-600">
<span className="flex items-center gap-1">
<Users size={16} />
<PeopleIcon size={16} />
{cls.student_count} students
</span>
<span className="flex items-center gap-1">
<Calendar size={16} />
<CalendarTodayIcon size={16} />
{cls.timetable_count} timetables
</span>
</div>