Product Detail - Copy this React, Tailwind Component to your project

Ý tôi là Các api dạng như này "data": { "id": 8, "title": "Sản phẩm 4", "rating": 0.0, "reviews": 0, "description": "Mô tả sản phẩm 4", "price": 250000, "brand": "Lenovo", "images": [ "https://example.com/image1.jpg", "https://example.com/image2.jpg", "https://example.com/image3.jpg" ], "attributes": [ { "key": "Màu sắc", "values": [ { "id": 19, "value": "Đỏ" }, { "id": 20, "value": "Xanh" }, { "id": 21, "value": "Đen" } ] }, { "key": "Dung lượng", "values": [ { "id": 22, "value": "64GB" }, { "id": 23, "value": "128GB" }, { "id": 24, "value": "256GB" } ] }, { "key": "Áo", "values": [] }, { "key": "Size", "values": [] }, { "key": "SIZZZ", "values": [] }, { "key": "SIZZZa", "values": [] }, { "key": "á", "values": [] }, { "key": "Áo sađ dsf", "values": [] } ], "variants": [ { "id": 28, "attributes": [ { "id": 19 }, { "id": 22 } ], "quantity": 100 }, { "id": 29, "attributes": [ { "id": 19 }, { "id": 23 } ], "quantity": 100 }, { "id": 30, "attributes": [ { "id": 19 }, { "id": 24 } ], "quantity": 100 }, { "id": 31, "attributes": [ { "id": 20 }, { "id": 22 } ], "quantity": 100 }, { "id": 32, "attributes": [ { "id": 20 }, { "id": 23 } ], "quantity": 100 }, { "id": 33, "attributes": [ { "id": 20 }, { "id": 24 } ], "quantity": 100 }, { "id": 34, "attributes": [ { "id": 21 }, { "id": 22 } ], "quantity": 100 }, { "id": 35, "attributes": [ { "id": 21 }, { "id": 23 } ], "quantity": 100 }, { "id": 36, "attributes": [ { "id": 21 }, { "id": 24 } ], "quantity": 100 } ], "bought": false }. product có thể có nhiều thuộc tính phải show hết và cả giá trị. nếu có bao nhiêu thuộc tính thì phải chọn bấy nhiêu mới được thêm vào giỏ hàng. nếu không có variant thì không cho thêm vào giỏ hàng