hunk.code_window:       }
         return {
           name: parsedKeyValArr[1].trim(),
           value: parsedKeyValArr[3].trim() || '',
         };
       })
     );
   }
  
hunk.labels: keep keep keep keep add keep keep keep keep
hunk.after_edit:         needsDeletion: false,
  
hunk.file_path: app/react/components/form-components/EnvironmentVariablesFieldset/utils.ts
hunk.type: add
file: import { ReactNode, useEffect, useState } from 'react';
  
  interface Props {
    // props for the image to load
    src?: string; // a link to an external image
    fallbackIcon: ReactNode;
    alt?: string;
    className?: string;
  }
  
  export function FallbackImage({ src, fallbackIcon, alt, className }: Props) {
    const [error, setError] = useState(false);
  
    useEffect(() => {
      setError(false);
    }, [src]);
  
    if (!error && src) {
      return (
        <img
          className={className}
          src={src}
          alt={alt}
          onError={() => setError(true)}
        />
      );
    }
  
    // fallback icon if there is an error loading the image
    return <>{fallbackIcon}</>;
  }
  