add input mask for phone in user settings page

src/app/ui/settings/personal-data-settings.tsx

@@ -3,6 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useActionState, useState, useEffect } from 'react';
 import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
+import { InputMask, format } from '@react-input/mask';
+import styles from '@/app/styles/module/login.module.scss';
 
 export default function PersonalDataSettings() {
 	const [errorMessage, formAction, isPending] = useActionState(
@@ -70,12 +72,23 @@ export default function PersonalDataSettings() {
 						<label className="form-label">
 							{t('phone')}:
 						</label>
-						<input
+						<InputMask
 							type="phone"
+							id="phone"
 							name="phone"
-							className="form-input"
-							defaultValue={userData?.phone}
+							className={`${styles['form-input']}`}
+							mask="+7 (___) ___-__-__"
+							replacement={{ _: /\d/ }}
+							value={(format(userData?.phone ? userData?.phone : '', {
+								mask: "+7 (___) ___-__-__",
+								replacement: { _: /\d/ }
+							}))}
+							disabled={true}
+							onChange={(e) => {
+							}}
+							placeholder="+7 (999) 123-45-67"
 						/>
+
 					</div>
 					<button type="submit" className="btn btn-primary">
 						{t('save-changes')}