Add Layout component, syntax highlighting and tidy up

admin/src/components/reqlog/LogsOverview.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { Box, Paper, Container, Typography } from "@material-ui/core";
+
+import RequestList from "./RequestList";
+import LogDetail from "./LogDetail";
+
+function LogsOverview(): JSX.Element {
+  const [detailReqLogId, setDetailReqLogId] = useState<string | null>(null);
+
+  const handleLogClick = (reqId: string) => setDetailReqLogId(reqId);
+
+  return (
+    <Box style={{ padding: 8 }}>
+      <Box mb={2}>
+        <RequestList onLogClick={handleLogClick} />
+      </Box>
+      <Box>
+        {detailReqLogId ? (
+          <LogDetail requestId={detailReqLogId} />
+        ) : (
+          <Paper
+            elevation={0}
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "60vh",
+            }}
+          >
+            <Typography>Select a log entry…</Typography>
+          </Paper>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default LogsOverview;