Prompt Title: Hiển thị thuộc tính attributes.

Để hiển thị tất cả các thuộc tính (attributes) trong một bảng, bạn có thể sử dụng luôn component AttributeTable như đã tạo trước đó. Đảm bảo rằng record?.attributes là một mảng chứa các đối tượng thuộc tính có các trường id, name và value.

jsxCopy code
import React from 'react';

const AttributeTable = ({ attributes }) => {
  return (
    <table className="w-full border-collapse table-auto">
      <thead>
        <tr>
          <th className="border px-4 py-2">Name</th>
          <th className="border px-4 py-2">Value</th>
        </tr>
      </thead>
      <tbody>
        {attributes.map((attribute) => (
          <tr key={attribute.id}>
            <td className="border px-4 py-2">{attribute.name}</td>
            <td className="border px-4 py-2">{attribute.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export const VariantShow: React.FC<IResourceComponentsProps> = () => {
    // ... (your existing code)

    return (
        <Show isLoading={isLoading}>
            <div className="grid grid-cols-2">
                <div className="">
                    {/* ... (your existing code) */}
                    <Heading as="h5" size="sm" mt={4}>
                        Attributes
                    </Heading>
                    {record?.attributes ? (
                        <AttributeTable attributes={record.attributes} />
                    ) : (
                        <p>No attributes found.</p>
                    )}
                </div>
                <div className="">
                    {/* ... (your existing code) */}
                </div>
            </div>
        </Show>
    );
};

Trong đoạn mã trên, component AttributeTable được sử dụng để hiển thị tất cả các thuộc tính trong bảng. Nếu không có thuộc tính nào, thông báo "No attributes found." sẽ được hiển thị.