Add input field to /graph page.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/pages/graph.module.css

@@ -0,0 +1,14 @@
+.input {
+  font-family: "DejaVu Sans Mono";
+  padding-top: 7px;
+  transition: none;
+
+  &:focus-within {
+    outline: rem(2px) solid var(--mantine-color-blue-filled);
+    border-color: transparent;
+  }
+
+  &:placeholder-shown {
+    font-family: unset;
+  }
+}

web/ui/mantine-ui/src/pages/graph.tsx

@@ -1,3 +1,27 @@
+import { Group, Textarea, Button } from "@mantine/core";
+import { IconTerminal } from "@tabler/icons-react";
+import { useState } from "react";
+import classes from "./graph.module.css";
+
 export default function Graph() {
-  return <>Graph page</>;
+  const [expr, setExpr] = useState<string>("");
+
+  return (
+    <Group align="baseline" wrap="nowrap" gap="xs" mt="sm">
+      <Textarea
+        style={{ flex: "auto" }}
+        classNames={classes}
+        placeholder="Enter PromQL expression..."
+        value={expr}
+        onChange={(event) => setExpr(event.currentTarget.value)}
+        leftSection={<IconTerminal />}
+        rightSectionPointerEvents="all"
+        autosize
+        autoFocus
+      />
+      <Button variant="primary" onClick={() => console.log(expr)}>
+        Execute
+      </Button>
+    </Group>
+  );
 }