Input Todo - Copy this React, Tailwind Component to your project
Prompt: Thiết Kế Giao Diện Hiện Đại và Đẹp Nhất cho Component InputTodo Chúng ta cần thiết kế một component InputTodo hiện đại và hấp dẫn 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 tinh tế, thu hút và mang lại trải nghiệm người dùng tuyệt vời. 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 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 để tạo cảm giác mềm mại và thân thiện. Sử dụng bảng màu tối giản và thanh lịch, chẳng hạn như màu trắng, xám nhạt, hoặc xanh pastel, kết hợp với các yếu tố nổi bật như màu xanh dương hoặc cam để tạo điểm nhấn. Đảm bảo responsive, hoạt động tốt trên cả desktop và mobile, với các kích thước và khoảng cách được tối ưu hóa cho mọi thiết bị. 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. 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.
