Development of Email Text Fields. Some bugs and issues an inconsistancies could not be solved for now

Client/src/components/TextFields/Description/DescriptionTextField.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "./descriptionTextField.css";
+
+function DescriptionTextField() {
+  return <div>DescriptionTextField</div>;
+}
+
+export default DescriptionTextField;

Client/src/components/TextFields/Email/EmailTextField.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import "./emailTextField.css";
+import { InputAdornment, TextField } from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+
+function EmailTextField({
+  id,
+  label,
+  variant,
+  placeholder,
+  icon,
+  helperText,
+  error,
+}) {
+  const [showIcon, setShowIcon] = useState(false);
+
+  // State to control mouse hover effect
+  const handleMouseEnter = () => setShowIcon(true);
+  const handleMouseLeave = () => setShowIcon(false);
+
+  return (
+    <div className="email-text-field">
+      <TextField
+        error={error}
+        className="email-text-field-input"
+        id={id}
+        label={label}
+        variant={variant}
+        placeholder={placeholder}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              {error && showIcon && (
+                <ErrorOutlineIcon style={{ fill: "red" }} />
+              )}
+              {error && !showIcon && (
+                <ErrorOutlineIcon style={{ fill: "red" }} />
+              )}
+              {!error && showIcon && <HelpOutlineIcon />}
+            </InputAdornment>
+          ),
+        }}
+        helperText={helperText}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />
+    </div>
+  );
+}
+
+export default EmailTextField;

Client/src/components/TextFields/Email/emailTextField.css

@@ -0,0 +1,9 @@
+#outlined-basic {
+  width: 320px;
+  font-size: 13px;
+}
+
+.email-text-field {
+  position: relative;
+  margin: 10px 20px;
+}

Client/src/components/TextFields/Website/WebsiteTextField.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "./websiteTextField.css";
+
+function WebsiteTextField() {
+  return <div>WebsiteTextField</div>;
+}
+
+export default WebsiteTextField;