Prettier
This commit is contained in:
parent
0ba9c8c175
commit
be35a0a7c1
|
@ -48,7 +48,7 @@ body {
|
||||||
|
|
||||||
.hidden-animate {
|
.hidden-animate {
|
||||||
display: none;
|
display: none;
|
||||||
animation: hide-animation 0.5s
|
animation: hide-animation 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-right {
|
.slide-right {
|
||||||
|
@ -87,7 +87,7 @@ body {
|
||||||
.easter-egg {
|
.easter-egg {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto 20px;
|
margin: auto 20px;
|
||||||
animation: fade-slide-left 0.5s
|
animation: fade-slide-left 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-picture:hover {
|
.profile-picture:hover {
|
||||||
|
|
|
@ -55,18 +55,29 @@ export function Main() {
|
||||||
const [timesClicked, changeTimesClicked] = useState(0);
|
const [timesClicked, changeTimesClicked] = useState(0);
|
||||||
const handlePictureClick = () => {
|
const handlePictureClick = () => {
|
||||||
changeTimesClicked((timesClicked) => timesClicked + 1);
|
changeTimesClicked((timesClicked) => timesClicked + 1);
|
||||||
}
|
};
|
||||||
const checkTimesClicked = () => {
|
const checkTimesClicked = () => {
|
||||||
return timesClicked >= 10;
|
return timesClicked >= 10;
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header links={links} />
|
<Header links={links} />
|
||||||
|
|
||||||
<div className="easter-egg-box">
|
<div className="easter-egg-box">
|
||||||
<img className={checkTimesClicked() ? "profile-picture slide-right" : "profile-picture"} onClick={handlePictureClick} height={130} src="/potato.png" />
|
<img
|
||||||
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>Stop that!</p>
|
className={
|
||||||
|
checkTimesClicked()
|
||||||
|
? "profile-picture slide-right"
|
||||||
|
: "profile-picture"
|
||||||
|
}
|
||||||
|
onClick={handlePictureClick}
|
||||||
|
height={130}
|
||||||
|
src="/potato.png"
|
||||||
|
/>
|
||||||
|
<p className={checkTimesClicked() ? "easter-egg" : "easter-egg hidden"}>
|
||||||
|
Stop that!
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="head">
|
<div className="head">
|
||||||
|
|
Loading…
Reference in a new issue