link-stack/packages/ui/components/DisplayTextField.tsx

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: 18,
          color: darkGray,
        },
        width: "100%",
      }}
      InputProps={{
        endAdornment: copyable ? (
          <InputAdornment position="end">
            <IconButton
              onClick={() => copyToClipboard(value)}
              size="small"
              color="primary"
              sx={{ p: 0, color: darkMediumGray }}
            >
              <ContentCopyIcon />
            </IconButton>
          </InputAdornment>
        ) : null,
        disableUnderline: true,
        sx: {
          minWidth: 0,
          fontSize: 16,
          backgroundColor: "transparent",
          pt: "1px",
        },
      }}
    />
  );
};