chameleon/viewer/frontend/src/components/output/ImageResult.tsx

/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the Chameleon License found in the
* LICENSE file in the root directory of this source tree.
*/
import { useEffect, useState } from "react";
import { ZoomIn, ZoomOut } from "@carbon/icons-react";

interface ImageResultProps {
  src: string;
  large?: boolean;
  completed?: boolean;
}

export function ImageResult({
  src: base64,
  large = false,
  completed = true,
}: ImageResultProps) {
  const [expand, setExpand] = useState(false);

  useEffect(() => {
    setExpand(large);
  }, [large]);

  return base64 ? (
    <div className="relative flex flex-col w-fit h-fit my-4 group">
      <img src={base64} width={expand ? 512 : 256} className="m-0" />
      {completed && (
        <div
          className="absolute top-0 right-[-36px] w-9 h-9 flex py-2 rounded-r-lg bg-white text-black flex-row items-center justify-center text-xs font-medium gap-1 hover:bg-gray-100 cursor-pointer"
          onClick={() => setExpand(!expand)}
        >
          {expand ? (
            <>
              <ZoomOut size={20} />
            </>
          ) : (
            <>
              <ZoomIn size={20} />
            </>
          )}
        </div>
      )}
    </div>
  ) : (
    <></>
  );
}