Bạn được giao nhiệm vụ tích hợp một thành phần React (React component) có sẵn vào cơ sở mã nguồn (codebase).
Cơ sở mã nguồn cần hỗ trợ:
- Cấu trúc dự án shadcn
- Tailwind CSS
- Typescript
Nếu dự án chưa hỗ trợ các công nghệ trên, hãy cung cấp hướng dẫn cách thiết lập dự án thông qua shadcn CLI, cài đặt Tailwind hoặc Typescript.
Xác định đường dẫn mặc định cho các thành phần giao diện (components) và tệp định kiểu (styles).
Nếu đường dẫn mặc định cho các thành phần không phải là `/components/ui`, hãy giải thích rõ tại sao việc tạo thư mục này lại quan trọng.
Sao chép và dán thành phần giao diện này vào thư mục `/components/ui`:
Hướng dẫn Triển khai
1. Phân tích cấu trúc thành phần và xác định tất cả các thư viện phụ thuộc (dependencies) bắt buộc
2. Rà soát các đối số (props) và trạng thái (state) của thành phần
3. Xác định bất kỳ context providers hoặc hooks cần thiết nào và cài đặt chúng
4. Các câu hỏi cần đặt ra
- Những dữ liệu/props nào sẽ được truyền vào thành phần này?
- Có yêu cầu quản lý trạng thái cụ thể nào không?
- Có cần các tài nguyên bắt buộc nào (hình ảnh, biểu tượng, v.v.) không?
- Hành vi hiển thị đáp ứng (responsive) mong đợi là gì?
- Vị trí tốt nhất để sử dụng thành phần này trong ứng dụng là ở đâu?
Các bước tích hợp
0. Sao chép và dán toàn bộ đoạn mã ở trên vào đúng các thư mục quy định
1. Cài đặt các thư viện phụ thuộc bên ngoài
2. Điền vào các vị trí tài nguyên hình ảnh bằng ảnh kho lưu trữ Unsplash mà bạn biết chắc chắn có tồn tại
3. Sử dụng bộ biểu tượng `lucide-react` cho các hình svg hoặc logo nếu thành phần đó yêu cầu
