Adding the rich text widget

gui/rpk-gui/src/lib/LabelledOutlined.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement, ReactNode } from "react";
+
+import clsx from "clsx";
+import { InputLabel, styled } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput/NotchedOutline";
+
+const DivRoot = styled("div")(({ theme }) => ({
+  position: "relative",
+  marginTop: "8px",
+}));
+
+const DivContentWrapper = styled("div")(({ theme }) => ({
+  position: "relative",
+}));
+
+const DivContent = styled("div")(({ theme }) => ({
+  paddingTop: "1px",
+  paddingLeft: theme.spacing(1),
+  paddingRight: theme.spacing(1),
+}));
+
+const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  top: 0,
+}));
+
+const StyledNotchedOutline = styled(NotchedOutline)(({ theme }) => [
+  {
+    borderRadius: theme.shape.borderRadius,
+    borderColor: theme.palette.grey["400"]
+  },
+  theme.applyStyles('dark', {
+    borderRadius: theme.shape.borderRadius,
+    borderColor: theme.palette.grey["800"]
+  })
+]);
+
+interface Props {
+  id: string;
+  label: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function LabelledOutlined({ id, label, children, className }: Props): ReactElement {
+  const labelRef = React.useRef(null);
+  return (
+    <DivRoot className={clsx(className)}>
+      <StyledInputLabel
+        ref={labelRef}
+        htmlFor={id}
+        variant="outlined"
+        shrink
+      >
+        {label}
+      </StyledInputLabel>
+      <DivContentWrapper>
+        <DivContent id={id}>
+          {children}
+          <StyledNotchedOutline notched label={label + "*"} />
+        </DivContent>
+      </DivContentWrapper>
+    </DivRoot>
+  );
+}