Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Base64Png Editor PatternFly
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>
);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment