/
Result.jsx
50 lines (46 loc) · 1.23 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
import { getReadableDate } from "../helpers/utils";
const Result = ({ results }) => {
if (results.isLoading) {
return (
<div className="loading-spinner">
<div className="loading-spinner__circle">
<div className="loading-spinner__circle--inner"></div>
</div>
</div>
);
}
if (results.isError) {
return <div>Error: {results.error.message}</div>;
}
const data = results.data;
return (
<>
<div>
<div className="picture">
<h2>Astromomy Picture Of The Day</h2>
<figure>
{data.media_type === "video" ? (
<iframe src={data.url} title="a">
{data.title}
</iframe>
) : (
<img src={data.url} alt={data.title} />
)}
<figcaption>
{data.copyright && (
<p>Image Credits and Copyright: {data.copyright}</p>
)}
<p className="title">
{data.title} - {getReadableDate(data.date)}
</p>
</figcaption>
</figure>
</div>
<div className="explaination">
<p>{data.explanation}</p>
</div>
</div>
</>
);
};
export default Result;