Input Todo - Copy this React, Tailwind Component to your project
Prompt: Thiết Kế Component InputTodo Hiện Đại với Theme Tối cho Ứng Dụng Todo Chúng ta cần thiết kế một component InputTodo đẹp mắt, hiện đại và sử dụng theme tối cho ứng dụng Todo. Component này sẽ cho phép người dùng nhập và thêm các công việc mới vào danh sách. Thiết kế cần phải nổi bật, tinh tế và mang lại trải nghiệm người dùng tuyệt vời trong môi trường ánh sáng thấp. Yêu cầu chức năng: Một ô nhập liệu (input field) để người dùng nhập tên công việc. Nút "Add" hoặc biểu tượng "+" để thêm công việc mới. Khả năng thêm công việc bằng cách nhấn Enter. Yêu cầu giao diện: Sử dụng theme tối với các tông màu chủ đạo như đen, xám đậm, và các sắc thái tối của màu. Tạo độ tương phản với các yếu tố sáng như văn bản và biểu tượng để dễ đọc và tương tác. Áp dụng hiệu ứng phát sáng nhẹ (subtle glow effect) cho các yếu tố tương tác để tăng cảm giác hiện đại và "tech". Sử dụng font sans serif hiện đại, dễ đọc trong môi trường tối. Thiết kế minimalist với các đường nét sạch sẽ và góc bo tròn nhẹ. Màu sắc và hiệu ứng: Nền chính: Đen (#000000) hoặc xám rất đậm (#121212). Ô nhập liệu: Xám đậm (#1E1E1E) với viền sáng hơn (#333333). Văn bản và biểu tượng: Trắng (#FFFFFF) hoặc xám nhạt (#E0E0E0). Nút "Add": Gradient từ xanh dương đậm (#1E3A8A) đến xanh dương sáng hơn (#3B82F6). Hiệu ứng hover: Tăng độ sáng nhẹ và thêm glow effect. Sử dụng shadow box nhẹ để tạo độ sâu cho các thành phần. Bố cục và kích thước: Ô nhập liệu chiếm phần lớn chiều rộng, với nút "Add" ở bên phải. Chiều cao đủ lớn (khoảng 50 60px) để dễ tương tác trên thiết bị di động. Padding và margin hợp lý để tạo không gian thở cho giao diện. Hiệu ứng và tương tác: Animation mượt mà khi focus vào ô nhập liệu (ví dụ: viền sáng lên). Hiệu ứng ripple khi nhấn nút "Add". Hiệu ứng transition nhẹ nhàng cho các thay đổi trạng thái (hover, focus, active). Responsive: Thiết kế linh hoạt, tự điều chỉnh cho các kích thước màn hình khác nhau. Trên mobile, có thể chuyển nút "Add" thành biểu tượng "+" để tiết kiệm không gian. Accessibility: Đảm bảo độ tương phản đủ cao giữa văn bản và nền. Thêm các thuộc tính ARIA phù hợp cho trải nghiệm tốt với trình đọc màn hình. Mã nguồn: Sử dụng React để xây dựng component. Áp dụng CSS in JS (styled components hoặc Emotion) hoặc module CSS để style. Quản lý state với React hooks (useState, useEffect nếu cần). Tối ưu hóa: Đảm bảo hiệu suất tốt, tránh re render không cần thiết. Lazy loading cho các icon hoặc component phụ (nếu có). Hãy tạo một component InputTodo đẹp mắt, hiện đại và phù hợp với theme tối, mang lại trải nghiệm người dùng tuyệt vời cho ứng dụng Todo của bạn!
