Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { useContext } from "react";
import AppContext from "../AppContext";
import { Link } from "@material-ui/core";
import { zoomInUp } from "react-animations";
import Radium, { StyleRoot } from "radium";
export default function TransitionsModal() {
const value = useContext(AppContext);
let { trueOrFalse } = value;
const styles = {
root: {
textAlign: "center",
},
bounce: {
animation: "x 1s",
animationName: Radium.keyframes(zoomInUp, "zoomInUp"),
},
image: {
maxWidth: "15rem",
},
text: {
fontSize: "2rem",
fontWeight: "bold",
},
};
let refreshPage = () => {
window.location.reload();
};
console.log(trueOrFalse);
return (
<div style={styles.root}>
{trueOrFalse ? (
<div>
<StyleRoot>
<div className="test" style={styles.bounce}>
<img src="/assets/images/dolphin.jpeg" style={styles.image} />
<p className="text" style={styles.text}>
You are memorious
</p>
</div>
</StyleRoot>
<Link component="button" variant="body2" onClick={refreshPage}>
Try again
</Link>
</div>
) : (
<div>
<StyleRoot>
<div className="test" style={styles.bounce}>
<img src="/assets/images/nemo.jpg" style={styles.image} />
<p className="text" style={styles.text}>
Try to improve your memory
</p>
</div>
</StyleRoot>
<Link component="button" variant="body2" onClick={refreshPage}>
Try again
</Link>
</div>
)}
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment