Dashboard - Copy this React, Tailwind Component to your project
General Overview: This is a dashboard for an educational platform named "IELTS Mentor." The interface consists of various components that help users, presumably teachers or administrators, manage classes. Key Components: Header Section (Blue) Located at the top of the page, featuring a dark blue background. On the left side, there’s the "IELTS Mentor" logo, consisting of a yellow icon and text. The navigation menu includes the following items: "Dashboard" (currently active). "Thu nhập" (Income). "Lịch giảng dạy" (Teaching schedule). "Tin tức" (News). On the right side, there’s a profile section with the user's name ("ANA ELSA") and a small profile picture. A notification bell icon is also visible near the user profile. Page Title and Search Bar The page title reads "Danh sách lớp học" (Class List), written in bold, large font. Below the title, there is a search bar to filter classes based on names, alongside additional filtering options for "Trạng thái" (Status) and "Loại lớp học" (Class type). The filters are located in a blue toolbar just above the class list. Class List Cards The main content of the page shows several class cards in a grid layout. Each card contains: The class code (e.g., "IE5.5_152"). A class identifier number (e.g., "#123456"). The location of the class (e.g., "Cơ sở IELTS Mentor Phố Vọng"). The duration of the course (e.g., "Thời gian học: 28 buổi" – 28 lessons). Class timings (e.g., "Giờ học: 18h 19h30 thứ 3, 5, 7"). Additional information like the start date or status (e.g., "Đã hoàn thành" – Completed or "Đang học" – Ongoing). Cards use different background colors based on the class status, including green, brown, and shades of blue. Footer The footer, located at the bottom right of the page, contains versioning information: "Version 1.0.3, phát hành ngày 24/12/2024" (Version 1.0.3, released on 24/12/2024).
