change style & add space & validation number in register page

components/register/LogInPage.js

@@ -1,12 +1,16 @@
 import Field from "@/app/component/element/Field";
-import { Button } from "@mui/material";
+import { formatPhoneNumber, validatePhoneNumber } from "@/helper";
+import { Button, InputAdornment } from "@mui/material";
 import Link from "next/link";
 import { useState } from "react";
 
 function LogInPage({ setIsSendMsg, setStep }) {
-  const [num, setNum] = useState("09");
-  const updateNum = (value) => {
-    setNum(value === "0" || !value ? "09" : value);
+  const [num, setNum] = useState("");
+  const [error, setError] = useState(false);
+
+  const handleChange = (val) => {
+    const formatted = formatPhoneNumber(val);
+    setNum(formatted);
   };
 
   return (
@@ -20,19 +24,43 @@ function LogInPage({ setIsSendMsg, setStep }) {
       <p className="text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal">
         شماره همراه خود را وارد نمایید.
       </p>
-      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[40px] sm:mb-[37px] md:mb-[36px] lg:mb-[32px]">
+      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[19px] sm:mb-[16px] md:mb-[15px] lg:mb-[11px]">
         <Field
           dir="ltr"
           value={num}
-          type="number"
+          type="string"
+          error={error}
+          inputProps={{
+            startAdornment:
+              <InputAdornment
+                className="!ml-4"
+                position="start"
+                sx={{
+                  '.MuiTypography-root': {
+                    lineHeight: '0 !important',
+                  },
+                  '.muirtl-1qj5e5k-MuiTypography-root': {
+                    color: '#000000de !important'
+                  }
+                }}
+              >09</InputAdornment>,
+          }}
           title="شماره همراه"
-          updateState={updateNum}
+          updateState={handleChange}
         />
+        <p className={`text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all
+            ${error ? 'opacity-100' : 'opacity-0'}
+            `}>{error}</p>
       </div>
       <Button
         fullWidth
         variant="contained"
         onClick={() => {
+          const checkedNum = validatePhoneNumber(num);
+          if (!checkedNum.valid) {
+            setError(checkedNum.error);
+            return;
+          }
           setIsSendMsg && setIsSendMsg(true);
           setStep && setStep((prev) => prev + 1);
         }}