Create/detail updates

packages/ui/components/DisplayTextField.tsx

@@ -0,0 +1,77 @@
+import { FC } from "react";
+import {
+  TextField as InternalTextField,
+  InputAdornment,
+  IconButton,
+} from "@mui/material";
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material";
+import { colors } from "../styles/theme";
+
+type DisplayTextFieldProps = {
+  name: string;
+  label: string;
+  value: string | number | null;
+  lines?: number;
+  helperText?: string;
+  copyable?: boolean;
+};
+
+export const DisplayTextField: FC<DisplayTextFieldProps> = ({
+  name,
+  label,
+  value,
+  lines = 1,
+  helperText,
+  copyable = false,
+}) => {
+  const { almostBlack, darkGray, darkMediumGray } = colors;
+
+  const copyToClipboard = (value: any) => {
+    navigator?.clipboard?.writeText(value.toString());
+  };
+
+  return (
+    <InternalTextField
+      variant="standard"
+      name={name}
+      label={label}
+      size="medium"
+      multiline={lines > 1}
+      rows={lines}
+      defaultValue={value === "" ? " " : value}
+      disabled
+      helperText={helperText}
+      sx={{
+        "& .MuiInputBase-input.Mui-disabled": {
+          WebkitTextFillColor: almostBlack,
+        },
+        "& .MuiFormLabel-root": {
+          fontSize: 20,
+          color: darkGray,
+          minWidth: 0,
+        },
+      }}
+      InputProps={{
+        endAdornment: copyable ? (
+          <InputAdornment position="start">
+            <IconButton
+              onClick={() => copyToClipboard(value)}
+              size="small"
+              color="primary"
+              sx={{ p: 0, color: darkMediumGray }}
+            >
+              <ContentCopyIcon />
+            </IconButton>
+          </InputAdornment>
+        ) : null,
+        disableUnderline: true,
+        sx: {
+          minWidth: 0,
+          fontSize: 18,
+          backgroundColor: "transparent",
+          pt: "1px",
+        },
+      }}
+    />
+  );
+};