frontPanel/src/ui_kit/CustomTextField.tsx

import {
  FormControl,
  TextField,
  useTheme,
  SxProps,
  Theme,
} from "@mui/material";

import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";

interface CustomTextFieldProps {
  placeholder: string;
  value?: string;
  error?: string;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  text?: string;
  sx?: SxProps<Theme>;
}

export default function CustomTextField({
  placeholder,
  value,
  text,
  sx,
  error,
  onChange,
  onKeyDown,
  onBlur,
}: CustomTextFieldProps) {
  const theme = useTheme();

  return (
    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
      <TextField
        defaultValue={text}
        fullWidth
        value={value}
        placeholder={placeholder}
        error={!!error}
        label={error}
        onChange={onChange}
        onKeyDown={onKeyDown}
        onBlur={onBlur}
        sx={{
          "& .MuiInputBase-root": {
            backgroundColor: theme.palette.background.default,
            height: "48px",
            borderRadius: "10px",
          },
          "& .MuiInputLabel-root": {
            fontSize: "13.5px",
            marginTop: "3px",
          },
          ...sx,
        }}
        inputProps={{
          sx: {
            borderRadius: "10px",
            fontSize: "18px",
            lineHeight: "21px",
            py: 0,
          },
        }}
      />
    </FormControl>
  );
}