Accordion, Tab, Modal

Link design Figma:
Component

Hãy xây dựng các thành phần Accordion, Tab và Modal dựa trên thiết kế.

• Không cần kiểm tra perfect pixel.
• Mã nguồn cần chạy ổn định, tối ưu.
• Ưu tiên khả năng tái sử dụng của các component.
• Các component cần hỗ trợ việc sử dụng nhiều instance cùng chức năng trên cùng một trang và hoạt động độc lập với nhau.

Yêu cầu thực hiện

1. Accordion

• Accordion cho phép hiển thị danh sách các mục, mỗi mục có thể mở rộng hoặc thu gọn để xem nội dung chi tiết.
• Khi nhấn vào tiêu đề của mỗi item, nội dung sẽ hiển thị/ẩn tương ứng.

2. Tab

• Tab giúp phân chia nội dung thành nhiều phần, mỗi phần nằm trong một tab riêng biệt.
• Khi chọn một tab, nội dung tương ứng sẽ được hiển thị, các tab khác sẽ ẩn nội dung.
• Có thể chuyển đổi giữa các tab bằng cách nhấn vào tiêu đề tab.

3. Modal

• Modal là cửa sổ nổi xuất hiện trên giao diện chính để hiển thị thông tin hoặc yêu cầu người dùng tương tác.
• Modal có thể đóng/mở bằng nút hoặc thao tác bên ngoài vùng modal.

---