Files Hooks

import { useFiles } from "@reopt-ai/brandapp-sdk/react/hooks";
import type { ReoptSDK } from "@reopt-ai/brandapp-sdk";

function FileGallery({ sdk }: { sdk: ReoptSDK }) {
  const { data, isLoading, refetch } = useFiles(sdk, {
    limit: 50,
    sortOrder: "desc",
  });

  if (isLoading) return <p>Loading files...</p>;

  return (
    <div>
      <p>{data?.meta.total} total files</p>
      <div className="grid grid-cols-3 gap-4">
        {data?.data.map((file) => (
          <div key={file.id}>
            {file.url && file.contentType?.startsWith("image/") ? (
              <img src={file.url} alt={file.name} />
            ) : (
              <p>{file.name}</p>
            )}
            <p>{(file.size / 1024).toFixed(0)} KB</p>
          </div>
        ))}
      </div>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}