fix validatio field

src/Components/Karimalden/View/SelectField.tsx

@@ -1,39 +0,0 @@
-import { Form, Select } from 'antd'
-import React from 'react'
-import useFormField from '../../../Hooks/useFormField';
-
-const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange, props}: any) => {
-
-  const {  errorMsg, isError, t ,formik} = useFormField(name, props)
-  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
-     formik.setFieldValue(name, value)
-
-  };
-  return (
-     <div className='KarimField'>
-        <label htmlFor={name} className="text">
-        {t(`${label ?  label : name}`)}
-        </label>
-        <Form.Item
-          hasFeedback
-          validateStatus={isError ? "error" : ""}
-          help={isError ? errorMsg : ""}
-        >
-          <Select
-          placeholder={t(`${placeholder ?placeholder  : name}`)}
-            disabled={isDisabled}
-            options={option}
-            defaultValue={formik.values[name]}
-            allowClear
-            {...(isMulti && { mode: "multiple" })}
-            onChange={onChange || SelecthandleChange}
-
-
-
-          />
-        </Form.Item>
-      </div>
-  )
-}
-
-export default SelectField

src/Components/ValidationField/ValidationField.scss

@@ -1,4 +1,4 @@
-.KarimField{
+.ValidationField{
   >*{
     width: 100%;
   }

src/Components/ValidationField/ValidationField.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import "./KarimField.scss";
+import "./ValidationField.scss";
 import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
 
-export interface KarimFieldProps {
+export interface ValidationFieldProps {
   name: string;
   type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
   placeholder?: string;
@@ -13,13 +13,13 @@ export interface KarimFieldProps {
   isDisabled?: boolean;
   picker?: "data" | "week" | "month" | "quarter" | "year";
   Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
-  accept?:any
+  accept?: any
   onChange?: (value: any) => void;
   Group?: boolean
-  dir?:'ltr' | "rtl"
+  dir?: 'ltr' | "rtl"
 }
 
-const KarimField = (props: KarimFieldProps) => {
+const ValidationField = (props: ValidationFieldProps) => {
   switch (props?.type) {
     case 'Select':
       return <SelectField {...props} />;
@@ -31,14 +31,14 @@ const KarimField = (props: KarimFieldProps) => {
       return <Time {...props} />;
     case "File":
       return <File {...props} />;
-       case "Checkbox":
+    case "Checkbox":
       return <CheckboxField {...props} />;
     default:
       return <Default {...props} />;
   }
 };
 
-KarimField.defaultProps = {
+ValidationField.defaultProps = {
   type: "text",
   className: 'default-class',
   option: [],
@@ -47,9 +47,9 @@ KarimField.defaultProps = {
   picker: "date",
   Format: "YYYY/MM/DD",
   onChange: undefined,
-  Group:false,
+  Group: false,
-  dir : "ltr",
+  dir: "ltr",
 
 };
 
-export default KarimField;
+export default ValidationField;

src/Components/ValidationField/View/DataRange.tsx

@@ -5,17 +5,17 @@ import useFormField from '../../../Hooks/useFormField';
 
 const { RangePicker } = DatePicker;
 
-const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: any) => {
+const DataRange = ({ name, label, isDisabled, option, isMulti, Format, props }: any) => {
 
   const { errorMsg, isError, t, formik } = useFormField(name, props)
   const onCalendarChange = (value: any) => {
-    
+
     formik.setFieldValue(name, value)
 
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>
@@ -24,12 +24,12 @@ const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: a
         validateStatus={isError ? "error" : ""}
         help={isError ? errorMsg : ""}
       >
-            <RangePicker
+        <RangePicker
-            allowClear
+          allowClear
-            className='w-100'
+          className='w-100'
-            format={Format}
+          format={Format}
-            onCalendarChange={onCalendarChange}
+          onCalendarChange={onCalendarChange}
-            />
+        />
 
 
       </Form.Item>

src/Components/ValidationField/View/Date.tsx

@@ -3,17 +3,17 @@ import React from 'react'
 import useFormField from '../../../Hooks/useFormField';
 import dayjs from 'dayjs';
 
-const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }: any) => {
+const Date = ({ name, label, isDisabled, option, isMulti, picker = "date", props }: any) => {
 
   const { errorMsg, isError, t, formik } = useFormField(name, props)
   const onCalendarChange = (value: any) => {
-    
+
     formik.setFieldValue(name, value)
 
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>
@@ -22,13 +22,13 @@ const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }:
         validateStatus={isError ? "error" : ""}
         help={isError ? errorMsg : ""}
       >
-              <DatePicker
+        <DatePicker
-              picker={picker}
+          picker={picker}
-                allowClear
+          allowClear
-                className='w-100'
+          className='w-100'
-                // defaultValue={formik.values[name]}
+          // defaultValue={formik.values[name]}
-                
+
-              onChange={onCalendarChange} />
+          onChange={onCalendarChange} />
 
 
 

src/Components/ValidationField/View/Default.tsx

@@ -4,13 +4,13 @@ import useFormField from '../../../Hooks/useFormField';
 
 const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any) => {
   const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
-  
+
 
   return (
-    <div className="KarimField">
+    <div className="ValidationField">
       <label htmlFor={name} className="text">
-        {t(`${label ?  label : name}`)}
+        {t(`${label ? label : name}`)}
-        </label>
+      </label>
       <Form.Item
         hasFeedback
         validateStatus={isError ? 'error' : ''}
@@ -19,7 +19,7 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any)
         <Field
           as={Input}
           type="text"
-          placeholder={t(`${placeholder ?placeholder  : name}`)}
+          placeholder={t(`${placeholder ? placeholder : name}`)}
           name={name}
           disabled={isDisabled}
         //  onChange={onChange ? onChange : handleChange}

src/Components/ValidationField/View/File.tsx

@@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { ErrorMessage } from 'formik';
 
 
-const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
+const File = ({ name, label, onChange, isDisabled, accept, props }: any) => {
   const { formik, t } = useFormField(name, props)
-  const imageUrl = formik.values[name] ? BaseURL_IMAGE + formik.values[name] :  '';
+  const imageUrl = formik.values[name] ? BaseURL_IMAGE + formik.values[name] : '';
 
   const fileList: UploadFile[] = [
 
@@ -20,16 +20,16 @@ const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
       thumbUrl: imageUrl,
     }
   ];
-  const FilehandleChange = (value:any) => {
+  const FilehandleChange = (value: any) => {
-    
+
     formik.setFieldValue(name, value.file.originFileObj)
 
   };
-  const customRequest = async ({ onSuccess}: any) => {
+  const customRequest = async ({ onSuccess }: any) => {
     onSuccess();
   };
   return (
-    <div className="KarimField">
+    <div className="ValidationField">
       <label htmlFor={name} className="text">
         {t(`${label || name}`)}
       </label>
@@ -45,7 +45,7 @@ const File = ({ name, label, onChange, isDisabled,accept, props }: any) => {
         customRequest={customRequest}
 
       >
-        <Button className='w-100' icon={<UploadOutlined  />}>{t("upload_image")}</Button>
+        <Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button>
         <ErrorMessage name={name}>{msg => <div className='error'>{t(msg)}</div>}</ErrorMessage>
 
       </Upload>

src/Components/ValidationField/View/SelectField.tsx

@@ -0,0 +1,39 @@
+import { Form, Select } from 'antd'
+import React from 'react'
+import useFormField from '../../../Hooks/useFormField';
+
+const SelectField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange, props }: any) => {
+
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
+  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
+    formik.setFieldValue(name, value)
+
+  };
+  return (
+    <div className='ValidationField'>
+      <label htmlFor={name} className="text">
+        {t(`${label ? label : name}`)}
+      </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Select
+          placeholder={t(`${placeholder ? placeholder : name}`)}
+          disabled={isDisabled}
+          options={option}
+          defaultValue={formik.values[name]}
+          allowClear
+          {...(isMulti && { mode: "multiple" })}
+          onChange={onChange || SelecthandleChange}
+
+
+
+        />
+      </Form.Item>
+    </div>
+  )
+}
+
+export default SelectField

src/Components/ValidationField/View/Time.tsx

@@ -2,17 +2,17 @@ import { Form, TimePicker } from 'antd'
 import React from 'react'
 import useFormField from '../../../Hooks/useFormField';
 
-const Time = ({ name, label,props }: any) => {
+const Time = ({ name, label, props }: any) => {
 
   const { errorMsg, isError, t, formik } = useFormField(name, props)
   const onCalendarChange = (value: any) => {
-    
+
     formik.setFieldValue(name, value)
 
   };
   return (
 
-    <div className='KarimField'>
+    <div className='ValidationField'>
       <label htmlFor={name} className="text">
         {t(`${label}`)}
       </label>
@@ -21,12 +21,12 @@ const Time = ({ name, label,props }: any) => {
         validateStatus={isError ? "error" : ""}
         help={isError ? errorMsg : ""}
       >
-              <TimePicker
+        <TimePicker
-                allowClear
+          allowClear
-                className='w-100'
+          className='w-100'
-                defaultValue={formik.values[name]}
+          defaultValue={formik.values[name]}
-              onChange={onCalendarChange} />
+          onChange={onCalendarChange} />
-              
+
 
 
 

src/Extensions/FileGenerator/generateForm.js

@@ -12,7 +12,7 @@ if (!fileName) {
 let FileContiner = `
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
+import ValidationField from '../../Components/Karimalden/ValidationField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
@@ -27,7 +27,7 @@ function Form${capitalizeFirstLetter(fileName)}() {
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
     <Col>
     {/* name from form utils */}
-      <KarimField name="name" type="text"label='name'  placeholder='placeholder' />
+      <ValidationField name="name" type="text"label='name'  placeholder='placeholder' />
       
     </Col>
     <Col>
@@ -43,8 +43,8 @@ export default Form${capitalizeFirstLetter(fileName)}
 
 
 `
-fs.writeFileSync('src/Pages/'+fileName+'/Form'+ capitalizeFirstLetter(fileName)+".tsx", 
+fs.writeFileSync('src/Pages/' + fileName + '/Form' + capitalizeFirstLetter(fileName) + ".tsx",
-FileContiner
+  FileContiner
 );
 
 console.log(`File "${fileName}" generated successfully.`);

src/Layout/app/Types.tsx

@@ -1,19 +1,19 @@
-export  interface FormTableState {
+export interface FormTableState {
-    objectToEdit: any[]; 
+  objectToEdit: any[];
-    OpenEdit: boolean;
+  OpenEdit: boolean;
-    OpenAdd: boolean;
+  OpenAdd: boolean;
-  }
+}
 
-  export type KarimFieldProps = {
+export type ValidationFieldProps = {
-    name: string;
+  name: string;
-    name2?: string;
+  name2?: string;
-    type: string;
+  type: string;
-    placeholder?: string;
+  placeholder?: string;
-    label?: string;
+  label?: string;
-    className?: string;
+  className?: string;
-    option?: any;
+  option?: any;
-    isMulti?: boolean;
+  isMulti?: boolean;
-    Disabled?: boolean;
+  Disabled?: boolean;
-    group ? : boolean;
+  group?: boolean;
-    dir?:'rtl' | 'ltr'
+  dir?: 'rtl' | 'ltr'
-  };
+};

src/Pages/Auth/LoginForm.tsx

@@ -2,26 +2,22 @@ import React from 'react'
 import { Formik, Form, Field } from 'formik';
 import Translate from '../../Components/Utils/Translate';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { TOKEN_KEY } from '../../config/AppKey';
 import { useLoginAdmin } from '../../api/auth';
 
-import * as Yup from "yup";
 import { getInitialValues, getValidationSchema } from './formUtil';
-import KarimField from '../../Components/Karimalden/KarimField';
-import { LoadingButton } from '../../Components/Ui/LoadingButton';
 import useNavigateOnSuccess from '../../Hooks/useNavigateOnSuccess';
 import useAuthState from '../../lib/state mangment/AuthState';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 const LoginForm = () => {
   const [t] = useTranslation();
 
-  const  {mutate , isLoading , isSuccess, data} = useLoginAdmin()
+  const { mutate, isLoading, isSuccess, data } = useLoginAdmin()
-  const {login} = useAuthState()
+  const { login } = useAuthState()
 
-  useNavigateOnSuccess(isSuccess , '/' , ()=>login(data as any ))
+  useNavigateOnSuccess(isSuccess, '/', () => login(data as any))
 
-  const handelSubmit = (values:any)=>{
+  const handelSubmit = (values: any) => {
 
     console.log(values);
     mutate(values)
@@ -30,7 +26,7 @@ const LoginForm = () => {
 
   return (
     <div className='LoginForm'>
-      <img className='Logo' src="/Layout/MisbarLogo.png" alt="Logo"  width={40}/>
+      <img className='Logo' src="/Layout/MisbarLogo.png" alt="Logo" width={40} />
 
       <nav className='Login_Nav'>
         <h5> {t("Login")} </h5>
@@ -46,8 +42,8 @@ const LoginForm = () => {
             <h4 className='Login_H4'>
               {t("Welcome back, please login to your account.")}
             </h4>
-            
+
-            <KarimField
+            <ValidationField
               placeholder={t('email')}
               type='text'
               name='email'
@@ -56,8 +52,8 @@ const LoginForm = () => {
           </div>
 
           <div className='form-outline mb-4'>
-            <KarimField
+            <ValidationField
-            placeholder={t('password')}
+              placeholder={t('password')}
               type='password'
               name='password'
 
@@ -67,7 +63,7 @@ const LoginForm = () => {
 
           {/* <LoadingButton className='btn btn-primary btn-lg btn-block w-100' isLoading={isLoading}> */}
 
-          <button type='submit'  className='btn btn-primary btn-lg btn-block w-100'>
+          <button type='submit' className='btn btn-primary btn-lg btn-block w-100'>
             {t("Sign in")}
           </button>
           {/* </LoadingButton> */}

src/Pages/Contact/FormContact.tsx

@@ -1,45 +1,43 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormContact() {
   const formik = useFormikContext<any>();
 
 
   const directionArray = [
-    {direction:"ltr",value:true},
+    { direction: "ltr", value: true },
-    {direction:"rtl",value:false},
+    { direction: "rtl", value: false },
   ];
 
-  const directionOptions = directionArray?.map( (e:any) =>  ({
+  const directionOptions = directionArray?.map((e: any) => ({
-    label:e?.direction ,
+    label: e?.direction,
-    value:e?.value
+    value: e?.value
   }))
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
-      <KarimField name="sub_title" type="text"label='sub_title'  placeholder='placeholder' />
+        <ValidationField name="sub_title" type="text" label='sub_title' placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
+      </Col>
+      <Col>
+        <ValidationField name="direction" option={directionOptions || []} type="Select" label='direction' placeholder='placeholder' />
+        <ValidationField name="is_have_button" type="Checkbox" label='Have button' placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
-      
+      </Col>
-    </Col>
-    <Col>
-    <KarimField name="direction" option={directionOptions || []} type="Select" label='direction'  placeholder='placeholder' />
-    <KarimField name="is_have_button" type="Checkbox" label='Have button'  placeholder='placeholder' />
-    <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
 
-    </Col>
 
-   
+    </Row>
-  </Row>
   )
 }
 

src/Pages/RecentWorks/FormRecentWorks.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormRecentWorks() {
   const formik = useFormikContext<any>();
@@ -14,19 +14,19 @@ function FormRecentWorks() {
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
-      
-    </Col>
-    <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
 
-    </Col>
+      </Col>
+      <Col>
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
-   
+      </Col>
-  </Row>
+
+
+    </Row>
   )
 }
 

src/Pages/Services/FormServices.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormServices() {
   const formik = useFormikContext<any>();
@@ -14,19 +14,19 @@ function FormServices() {
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
-      <KarimField name="description" type="text"label='description'  placeholder='placeholder' />
+        <ValidationField name="description" type="text" label='description' placeholder='placeholder' />
-      
-    </Col>
-    <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
 
-    </Col>
+      </Col>
+      <Col>
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
 
-   
+      </Col>
-  </Row>
+
+
+    </Row>
   )
 }
 

src/Pages/SocialMedia/FormSocialMedia.tsx

@@ -1,8 +1,8 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { useFormikContext } from 'formik';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormSocialMedia() {
   const formik = useFormikContext<any>();
@@ -11,18 +11,18 @@ function FormSocialMedia() {
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-      <KarimField name="link" type="text"label='link'  placeholder='placeholder' />
+        <ValidationField name="link" type="text" label='link' placeholder='placeholder' />
-      
-    </Col>
-    <Col>
-      <KarimField name="image"  type="File" label='image' placeholder='placeholder'  />
-      <KarimField name="is_active"  type="Checkbox" label='is_active' placeholder='placeholder' Group />
 
-    </Col>
+      </Col>
+      <Col>
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
+        <ValidationField name="is_active" type="Checkbox" label='is_active' placeholder='placeholder' Group />
 
-   
+      </Col>
-  </Row>
+
+
+    </Row>
   )
 }
 

src/Pages/StaticInfo/FormStaticInfo.tsx

@@ -1,41 +1,41 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
-function FormStaticInfo({isDisable= false}:{isDisable?:boolean}) {
+function FormStaticInfo({ isDisable = false }: { isDisable?: boolean }) {
   const formik = useFormikContext<any>();
-  
+
   const valueTypeArray = [
-    {valueType:"string",id:"string"},
+    { valueType: "string", id: "string" },
-    {valueType:"image",id:"image"},
+    { valueType: "image", id: "image" },
   ];
 
-  const valueTypeOptions = valueTypeArray?.map( (e:any) =>  ({
+  const valueTypeOptions = valueTypeArray?.map((e: any) => ({
-    label:e?.valueType ,
+    label: e?.valueType,
-    value:e?.id
+    value: e?.id
   }))
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="key" type="text"label='key' isDisabled={isDisable?true:false} placeholder='placeholder' />
+        <ValidationField name="key" type="text" label='key' isDisabled={isDisable ? true : false} placeholder='placeholder' />
-      
-    </Col>
-    <Col>
-      <KarimField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type'  placeholder='placeholder' />
 
-      <KarimField name="value" type={formik?.values?.value_type == 'image'? 'File':'text'}label='value'  placeholder='placeholder' />
+      </Col>
+      <Col>
+        <ValidationField name="value_type" option={valueTypeOptions || []} type="Select" label='value_type' placeholder='placeholder' />
 
-    </Col>
+        <ValidationField name="value" type={formik?.values?.value_type == 'image' ? 'File' : 'text'} label='value' placeholder='placeholder' />
 
-   
+      </Col>
-  </Row>
+
+
+    </Row>
   )
 }
 

src/Pages/projects/FormProjects.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormProjects() {
   const formik = useFormikContext<any>();
@@ -14,19 +14,19 @@ function FormProjects() {
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="title" type="text"label='title'  placeholder='placeholder' />
+        <ValidationField name="title" type="text" label='title' placeholder='placeholder' />
-    </Col>
+      </Col>
-    <Col>
+      <Col>
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />      
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
-      <KarimField name="hover_image" type="File"label='hover_image'  placeholder='placeholder' />      
+        <ValidationField name="hover_image" type="File" label='hover_image' placeholder='placeholder' />
-      <KarimField name="video" type="File"label='video'  placeholder='placeholder' accept={".mp4"} />      
+        <ValidationField name="video" type="File" label='video' placeholder='placeholder' accept={".mp4"} />
 
-    </Col>
+      </Col>
 
-   
+
-  </Row>
+    </Row>
   )
 }
 

src/Pages/works/FormWorks.tsx

@@ -1,11 +1,11 @@
 
 import React from 'react'
 import { Col, Row } from 'reactstrap';
-import KarimField from '../../Components/Karimalden/KarimField';
 import { FakeSelectData } from '../../Layout/app/Const';
 import { useFormikContext } from 'formik';
 
 import { DatePicker } from 'antd';
+import ValidationField from '../../Components/ValidationField/ValidationField';
 
 function FormWorks() {
   const formik = useFormikContext<any>();
@@ -14,14 +14,14 @@ function FormWorks() {
 
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-    <Col>
+      <Col>
-    {/* name from form utils */}
+        {/* name from form utils */}
-      <KarimField name="image" type="File"label='image'  placeholder='placeholder' />
+        <ValidationField name="image" type="File" label='image' placeholder='placeholder' />
-      
-    </Col>
 
-   
+      </Col>
-  </Row>
+
+
+    </Row>
   )
 }
 

src/Styles/Layout/Layout.scss

@@ -244,12 +244,12 @@ background: var(--bg);
  background-color:transparent;
  color:var(--text);
 }
-.react-tabs__tab-panel--selected .KarimField .ant-input-affix-wrapper,.modal-body .KarimField .ant-input-affix-wrapper{
+.react-tabs__tab-panel--selected .ValidationField .ant-input-affix-wrapper,.modal-body .ValidationField .ant-input-affix-wrapper{
  background-color:transparent;
 }
 
 /* Input */
-.react-tabs__tab-panel--selected .KarimField input[type=text],.modal-body .KarimField input{
+.react-tabs__tab-panel--selected .ValidationField input[type=text],.modal-body .ValidationField input{
  background-color:transparent;
  color:var(--text)!important;
  &::placeholder{