Tidy up admin structure

admin/src/features/sender/components/Response.tsx

@@ -0,0 +1,41 @@
+import { Box, Typography } from "@mui/material";
+
+import { sortKeyValuePairs } from "./KeyValuePair";
+import ResponseTabs from "./ResponseTabs";
+
+import ResponseStatus from "lib/components/ResponseStatus";
+import { HttpResponseLog } from "lib/graphql/generated";
+
+interface ResponseProps {
+  response?: HttpResponseLog | null;
+}
+
+function Response({ response }: ResponseProps): JSX.Element {
+  return (
+    <Box height="100%">
+      <div>
+        <Box sx={{ position: "absolute", right: 0, mt: 1.4 }}>
+          <Typography variant="overline" color="textSecondary" sx={{ float: "right", ml: 3 }}>
+            Response
+          </Typography>
+          {response && (
+            <Box sx={{ float: "right", mt: 0.2 }}>
+              <ResponseStatus
+                proto={response.proto}
+                statusCode={response.statusCode}
+                statusReason={response.statusReason}
+              />
+            </Box>
+          )}
+        </Box>
+      </div>
+      <ResponseTabs
+        body={response?.body}
+        headers={sortKeyValuePairs(response?.headers || [])}
+        hasResponse={response !== undefined && response !== null}
+      />
+    </Box>
+  );
+}
+
+export default Response;