Dummy Users - Copy this React, Tailwind Component to your project
Mô tả giao diện và chức năng lịch 1. Bố cục giao diện: Bên trái: Danh sách người dùng Hiển thị danh sách người dùng với chức năng tìm kiếm và lọc (filter) theo tên hoặc trạng thái hoạt động. Mỗi mục có một icon con mắt, cho phép mở modal chi tiết người dùng: Thông tin hiển thị bao gồm: ảnh đại diện, email, trạng thái hoạt động, lịch làm việc, và ghi chú cá nhân. Modal được tích hợp hiệu ứng mở/đóng mượt mà sử dụng Framer Motion. Bên phải: Lịch mini Lịch ở trạng thái thu gọn ban đầu với nút chuyển đổi dạng hiển thị giữa các chế độ: Lịch tháng hoặc lịch tuần. Tra cứu theo năm, hiển thị toàn bộ 12 tháng. Khi mở rộng, giao diện sẽ làm mờ nền để tập trung vào lịch. Nút chức năng dễ thao tác và thiết kế đẹp mắt. 2. Dạng hiển thị lịch: Dạng 1: Lịch tháng bình thường Hiển thị toàn bộ các ngày trong tháng hiện tại. Cho phép click vào từng ngày để: Xem thông tin sự kiện đã tạo. Thêm sự kiện mới hoặc ghi chú. Các ngày có sự kiện sắp xảy ra được đánh dấu bằng chuông thông báo hoặc icon nổi bật. Animation chuyển đổi khi thay đổi tháng hoặc mở rộng lịch. Dạng 2: Lịch tuần (thứ 2 → chủ nhật) Hiển thị lịch chi tiết theo tuần với các khung thời gian: Giờ, phút, giây trong ngày. Cho phép: Thêm ghi chú hoặc cập nhật thông tin công việc cho từng khoảng thời gian. Vuốt ngang để chuyển đổi giữa các ngày trong tuần. Cung cấp giao diện thân thiện để theo dõi công việc cụ thể theo thời gian. Tra cứu theo năm: Hiển thị toàn bộ 12 tháng của năm dưới dạng lưới lịch. Cho phép click vào từng tháng để xem chi tiết ngày. Animation chuyển đổi từ dạng năm sang tháng được thiết kế chuyên nghiệp và mượt mà. 3. Hiệu ứng động và trải nghiệm người dùng: Hiệu ứng chuyển đổi lịch: Animation khi chuyển đổi giữa tháng, tuần, năm. Hiệu ứng làm mờ nền khi mở rộng lịch. Hiệu ứng tương tác: Hover: Làm nổi bật các ngày trong lịch hoặc mục được chọn. Scale: Tăng giảm kích thước các phần tử khi chuyển trạng thái. Modal động: Mở modal với hiệu ứng chuyển động linh hoạt, giúp trải nghiệm trở nên chuyên nghiệp. 4. Giao diện chuyên nghiệp và rõ ràng: Thiết kế hiện đại: Màu sắc hài hòa, dễ nhìn, bố cục cân đối. Tích hợp hiệu ứng mượt mà từ Framer Motion và Tailwind CSS. Tương tác mượt mà: Nút bấm, hiệu ứng hover, chuyển đổi lịch được thiết kế tối ưu. Xử lý overflow: Bảo đảm không bị tràn nội dung khi mở rộng lịch hoặc chuyển đổi trạng thái.
