Base64Png Editor PatternFly

Base64PngEditor.tsx

export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwardedRef) => {
  // ...

  return (
    <div className={"base64png-editor--main"}>
      <div className={"base64png-editor--viewport"}>
        <img
          ref={imageRef}
          className={"base64png-editor--image"}
          src={`data:image/png;base64,${originalContent}`}
          alt={"Original"}
        />
        {disabled && (
          <EmptyState>
            <EmptyStateIcon icon={CubesIcon} />
            <Title headingLevel="h5" size="4xl">
              Empty image
            </Title>
          </EmptyState>
        )}
        <canvas ref={canvasRef} className={"base64png-editor--canvas"} />
      </div>
      <div className={"base64png-editor--tweaks"}>
        <Nav aria-label="Image tweaker">
          <NavList>
            <NavItem itemId={0}>
              <div className={"base64png-editor--tweaks-nav-item"}>
                <p>Invert</p>
                <Switch
                  id="invert-switch"
                  isDisabled={disabled}
                  isChecked={invert === "100"}
                  onChange={(value) => tweakInvert(value ? "100" : "0")}
                />
              </div>
            </NavItem>
          </NavList>
        </Nav>
      </div>
    </div>
  );
})