new/frontends/react/src/DataViewer.tsx

import Button from "./ui/Button";

interface DataViewerProps {
  onGetRandomSample: () => void;
  imageUrl: string | null;
  label: string | null;
}

export default function DataViewer({ onGetRandomSample, imageUrl, label }: DataViewerProps) {
  return (
    <div className="min-h-0 min-w-0 flex flex-col items-center">
      { imageUrl && (
        <div className="flex flex-col items-center gap-2 p-4">
          <img src={imageUrl} alt="Sample" className="max-h-64 object-contain border border-gray-300"/>
          <div className="text-lg font-medium">Label: {label}</div>
        </div>
      ) }
      <Button label="Get Random Sample" onClick={onGetRandomSample} />
    </div>
  )
}