/
PlanetListItem.tsx
102 lines (90 loc) · 2.38 KB
/
PlanetListItem.tsx
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as React from "react";
import classnames from "classnames";
import {
Theme,
createStyles,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";
import usePlanet from "@/services/oni-save/hooks/usePlanet";
import RecoverableElement from "./components/RecoverableElement";
export interface PlanetListItemProps {
planetId: number;
className?: string;
}
const styles = (theme: Theme) =>
createStyles({
root: {
width: theme.spacing(45),
display: "flex",
flexDirection: "column",
padding: theme.spacing(2)
},
titleBar: {
display: "flex",
flexDirection: "row",
marginBottom: theme.spacing()
},
titleControls: {
display: "flex",
flexDirection: "row",
marginLeft: "auto"
},
divider: {
marginBottom: theme.spacing()
},
contentLayout: {
display: "flex",
flexDirection: "row"
},
planetContainer: {
width: 100,
height: 100
},
planetImg: {
marginLeft: theme.spacing(),
marginRight: theme.spacing()
}
});
type Props = PlanetListItemProps & WithStyles<typeof styles>;
const PlanetListItem: React.FC<Props> = ({ classes, className, planetId }) => {
const { planet } = usePlanet(planetId);
if (!planet) {
return <Typography>No Data</Typography>;
}
const { type } = planet;
return (
<Paper className={classnames(className, classes.root)}>
<div className={classes.titleBar}>
<Typography variant="h6">{type}</Typography>
<div className={classes.titleControls} />
</div>
<Divider className={classes.divider} />
<div className={classes.contentLayout}>
<div className={classes.planetImg}>
<svg
viewBox="0 0 70 70"
width={70}
height={70}
className={classes.planetImg}
>
<circle cx={35} cy={35} r={35} fill="red" />
</svg>
</div>
<div>
{planet.recoverableElements.map((_, index) => (
<RecoverableElement
key={index}
planetId={planetId}
resourceId={index}
/>
))}
</div>
</div>
</Paper>
);
};
export default withStyles(styles)(PlanetListItem);