-
Notifications
You must be signed in to change notification settings - Fork 0
/
Result.jsx
59 lines (47 loc) · 2 KB
/
Result.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from "react"
import catType from "./catType.jsx"
import {TwitterShareButton} from "react-share";
import QuestionMarkTooltip from './QuestionMarkTooltip';
export default function Result(props){
const [isLoaded, setIsLoaded] = React.useState(false);
const handleImageLoad = () => {
setIsLoaded(true);
};
const prefix = ((catType[props.type].name === "Orange" ||
catType[props.type].name === "Orange & White" ||
catType[props.type].name === "Orange & Black") ? "an" : "a")
return(
<div className="result">
{!isLoaded &&
<div className="loader-container">
<div className="spinner"></div>
</div>
}
{isLoaded &&
<div className="result-cat">
You are <b>{Math.round(props.percentage)}%</b> {prefix} <b>{catType[props.type].name}</b> cat
</div>
}
<div>
<img src={catType[props.type].image} width="200px"
className="result-image" onLoad={handleImageLoad} />
</div>
{isLoaded &&
<div className="result-description"> {catType[props.type].description}
<label>
<QuestionMarkTooltip text="This conclusion is derived from careful research on cat behaviour conducted by Areen." />
</label>
</div>
}
{isLoaded &&
<div className="share-button">
<a href = {"https://twitter.com/intent/tweet?text=My%20cat%20aura%20type%20is%20"
+encodeURIComponent(catType[props.type].name)
+"%20cat!%20Check%20yours%20at%20&url=https%3A%2F%2Fwhich-cat-am-i.netlify.app"}>
Share it on Twitter!
</a>
</div>
}
</div>
)
}