-
-
Notifications
You must be signed in to change notification settings - Fork 342
/
ResponseDetail.tsx
52 lines (48 loc) · 1.41 KB
/
ResponseDetail.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
import { Typography, Box } from "@material-ui/core";
import { green } from "@material-ui/core/colors";
import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
interface Props {
response: {
proto: string;
statusCode: number;
status: string;
body?: string;
};
}
function ResponseDetail({ response }: Props): JSX.Element {
return (
<div>
<Box m={3}>
<Typography variant="h5">
{statusIcon(response.statusCode)} {response.proto} {response.status}
</Typography>
</Box>
<Box>
<SyntaxHighlighter
language="markup"
showLineNumbers={true}
style={materialLight}
>
{response.body}
</SyntaxHighlighter>
</Box>
</div>
);
}
function statusIcon(status: number): JSX.Element {
const style = { marginTop: ".2rem", verticalAlign: "top" };
switch (Math.floor(status / 100)) {
case 2:
case 3:
return <FiberManualRecordIcon style={{ ...style, color: green[400] }} />;
case 4:
return <FiberManualRecordIcon style={style} htmlColor={"#f00"} />;
case 5:
return <FiberManualRecordIcon style={style} htmlColor={"#f00"} />;
default:
return <FiberManualRecordIcon />;
}
}
export default ResponseDetail;