Student Management - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import { FiUsers, FiUserPlus, FiBookOpen, FiUserCheck } from "react-icons/fi"; import { BsSearch, BsThreeDotsVertical } from "react-icons/bs"; import { AiOutlineEdit, AiOutlineDelete } from "react-icons/ai"; import ClassList from "./components/ClassList"; import TeacherList from "./components/TeacherList"; import ScoreList from "./components/ScoreList"; const App = () => { const [selectedStudent, setSelectedStudent] = useState(null); const mockStudents = [ { id: "STD001", name: "John Smith", class: "Senior", major: "Computer Science", email: "john.smith@email.com", phone: "(555) 123-4567", image: "https://images.unsplash.com/photo-1633332755192-727a05c4013d" }, { id: "STD002", name: "Emma Johnson", class: "Junior", major: "Business", email: "emma.j@email.com", phone: "(555) 987-6543", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330" } ]; const Dashboard = () => ( <div className="space-y-8"> <div> <p className="text-gray-700 font-semibold">Total Students</p> <h3 className="text-2xl font-bold">1,234</h3> </div> <div> <p className="text-gray-700 font-semibold">Enrolled</p> <h3 className="text-2xl font-bold">256</h3> </div> <div> <p className="text-gray-700 font-semibold">Active</p> <h3 className="text-2xl font-bold">987</h3> </div> <div> <p className="text-gray-700 font-semibold">Graduated</p> <h3 className="text-2xl font-bold">452</h3> </div> </div> ); const StudentList = () => ( <div className="bg-white rounded-lg shadow-md p-6"> <div className="flex flex-col md:flex-row justify-between items-center mb-6"> <div className="relative w-full md:w-64 mb-4 md:mb-0"> <input type="text" placeholder="Search students..." className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> <BsSearch className="absolute left-3 top-3 text-gray-400" /> </div> <div className="flex gap-4"> <select className="border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> <option>All Classes</option> <option>Senior</option> <option>Junior</option> </select> <select className="border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> <option>All Majors</option> <option>Computer Science</option> <option>Business</option> </select> </div> </div> <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="bg-gray-50"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Major</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {mockStudents.map((student) => ( <tr key={student.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => setSelectedStudent(student)} > <td className="px-6 py-4 whitespace-nowrap">{student.id}</td> <td className="px-6 py-4 whitespace-nowrap"> <div className="flex items-center"> <img className="h-10 w-10 rounded-full" src={student.image} alt={student.name} /> <div className="ml-4">{student.name}</div> </div> </td> <td className="px-6 py-4 whitespace-nowrap">{student.class}</td> <td className="px-6 py-4 whitespace-nowrap">{student.major}</td> <td className="px-6 py-4 whitespace-nowrap"> <div className="flex space-x-2"> <button className="text-blue-500 hover:text-blue-700"> <AiOutlineEdit size={20} /> </button> <button className="text-red-500 hover:text-red-700"> <AiOutlineDelete size={20} /> </button> </div> </td> </tr> ))} </tbody> </table> </div> </div> ); const StudentDetails = ({ student }) => ( <div className="bg-white rounded-lg shadow-md p-6"> <div className="flex items-center mb-6"> <img src={student.image} alt={student.name} className="h-20 w-20 rounded-full" /> <div className="ml-4"> <h2 className="text-2xl font-bold">{student.name}</h2> <p className="text-gray-500">{student.id}</p> </div> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 className="text-lg font-semibold mb-4">Personal Information</h3> <div className="space-y-2"> <p><span className="font-medium">Class:</span> {student.class}</p> <p><span className="font-medium">Major:</span> {student.major}</p> </div> </div> <div> <h3 className="text-lg font-semibold mb-4">Contact Information</h3> <div className="space-y-2"> <p><span className="font-medium">Email:</span> {student.email}</p> <p><span className="font-medium">Phone:</span> {student.phone}</p> </div> </div> </div> </div> ); return ( <Router> <div className="min-h-screen bg-gray-100"> <div className="flex"> <div className="w-64 bg-white h-screen shadow-md fixed"> <div className="p-6"> <h1 className="text-2xl font-bold text-blue-600">Quản lý SV</h1> </div> <nav className="mt-6"> <Link to="/dashboard" className="w-full flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600" > <FiUsers className="mr-3" /> Dashboard </Link> <Link to="/students" className="w-full flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600" > <FiUserPlus className="mr-3" /> Sinh viên </Link> <Link to="/classes" className="w-full flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600" > <FiBookOpen className="mr-3" /> Lớp </Link> <Link to="/teachers" className="w-full flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600" > <FiUserCheck className="mr-3" /> Giáo viên </Link> <Link to="/scores" className="w-full flex items-center px-6 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600" > <FiBookOpen className="mr-3" /> Điểm </Link> </nav> </div> <div className="ml-64 p-8 w-full"> <Routes> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/" element={<Dashboard />} /> <Route path="/students" element={ <div className="space-y-6"> <StudentList /> {selectedStudent && <StudentDetails student={selectedStudent} />} </div> } /> <Route path="/classes" element={<div>Lớp Component</div>} /> <Route path="/teachers" element={<div>Giáo viên Component</div>} /> <Route path="/scores" element={<div>Điểm Component</div>} /> <Route path="*" element={<Dashboard />} /> </Routes> </div> </div> </div> </Router> ); }; export default App;