Modern and Elegant Input Todo List Component
Chúng ta cần thiết kế một component InputTodo không chỉ hiện đại mà còn cực kỳ đẹp mắt và tinh tế cho ứng dụng web todo list. Component này sẽ cho phép người dùng nhập các công việc mới và thêm chúng vào danh sách. Thiết kế cần phải nổi bật, mang lại trải nghiệm người dùng tuyệt vời và thể hiện sự chỉn chu trong từng chi tiết. Dưới đây là các yêu cầu chi tiết: Yêu cầu về chức năng: Component phải bao gồm một ô nhập liệu (input field) để người dùng nhập tên công việc. Có một nút "Add" để thêm công việc mới vào danh sách khi nhấn vào. Khi nhấn phím "Enter" trong ô nhập liệu, công việc cũng cần được thêm vào danh sách. Yêu cầu về giao diện: Sử dụng Bootstrap để tạo kiểu dáng cho component với phong cách hiện đại, sang trọng và tinh tế. Ô nhập liệu và nút "Add" cần được căn chỉnh ngang hàng, với các góc bo tròn mềm mại và thân thiện. Áp dụng bảng màu hiện đại với các tông màu chủ đạo như trắng, xám nhạt, hoặc xanh pastel, kết hợp với các điểm nhấn màu sắc tươi sáng như xanh dương, cam hoặc tím để tạo sự nổi bật và hấp dẫn. Đảm bảo responsive, hoạt động tốt trên mọi thiết bị, với các kích thước và khoảng cách được tối ưu hóa cho cả desktop và mobile. Tích hợp hiệu ứng chuyển động mượt mà khi người dùng tương tác, như hiệu ứng hover và focus, để tăng cường trải nghiệm người dùng, cùng với các hiệu ứng shadow nhẹ để tạo độ sâu cho giao diện. Yêu cầu về kỹ thuật: Sử dụng React để xây dựng component. Quản lý trạng thái của ô nhập liệu bằng hook useState. Đảm bảo code rõ ràng, dễ hiểu và dễ bảo trì, với chú thích đầy đủ để hỗ trợ phát triển và bảo trì về sau. Yêu cầu bổ sung: Thêm placeholder trong ô nhập liệu với nội dung "Enter your task here..." để hướng dẫn người dùng. Sau khi thêm công việc, cần tự động xóa nội dung trong ô nhập liệu để sẵn sàng cho lần nhập tiếp theo. Hiển thị thông báo lỗi dưới dạng tooltip hoặc thông báo nhỏ bên dưới ô nhập liệu nếu người dùng cố gắng thêm công việc mà không nhập nội dung. Đảm bảo rằng mọi yếu tố của thiết kế đều hài hòa và thống nhất, tạo ra một giao diện tổng thể chuyên nghiệp và hiện đại, với sự chỉn chu trong từng chi tiết nhỏ nhất.
