create form component

src/components/EditProfileModal.tsx

@@ -6,6 +6,7 @@ import { useUpdateUser } from '@/hooks/user'
 import Avatar from '@/components/Avatar'
 import TextInput from '@/components/TextInput'
 import Modal from '@/components/Modal'
+import Form from '@/components/Form'
 import FileUploadWrapper from './FileUploadWrapper'
 
 type FormType = 'profile' | 'password'
@@ -58,30 +59,16 @@ const EditProfileForm: React.FC<FormProps> = ({ user, setOpen, setActiveForm })
         </FileUploadWrapper>
         <button className="link link-primary text-right link-hover" onClick={() => setActiveForm('password')}>Change password</button>
       </div>
-      <form className="mt-4" onSubmit={form.handleSubmit(onSubmit)}>
+      <Form
+        form={form}
+        onSubmit={onSubmit}
+        onClose={() => setOpen && setOpen(false)}
+        isSubmitting={isLoading}
+      >
         <TextInput name="email" form={form} disabled={true} />
         <TextInput name="name" form={form} disabled={isLoading} />
         <TextInput name="about" form={form} disabled={isLoading} multiline />
-        <div className="flex justify-end mt-4">
-          <div className="space-x-2">
-            <button
-              type="submit"
-              className="btn btn-primary w-24"
-              disabled={!form.formState.isValid || isLoading || !form.formState.isDirty}
-            >
-              Save
-            </button>
-            <button
-              type="button"
-              className="btn btn-secondary w-24"
-              onClick={() => setOpen && setOpen(false)}
-              disabled={isLoading}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </form>
+      </Form>
     </div>
   )
 }
@@ -105,30 +92,17 @@ const EditPasswordForm: React.FC<FormProps> = ({ user, setActiveForm }) => {
   if (!user) return <></>
   return (
     <div>
-      <form className="mt-4" onSubmit={form.handleSubmit(onSubmit)}>
+      <Form
+        form={form}
+        onSubmit={onSubmit}
+        onCancel={() => setActiveForm('profile')}
+        isSubmitting={isLoading}
+        allowDirtySubmit
+      >
         <TextInput name="currentPassword" form={form} disabled={isLoading} validate={() => true} />
         <TextInput name="password" labelOverride="New password*" form={form} disabled={isLoading} />
         <TextInput name="confirmPassword" labelOverride="New password confirmation*" form={form} disabled={isLoading} />
-        <div className="flex justify-end mt-4">
-          <div className="space-x-2">
-            <button
-              type="submit"
-              className="btn btn-primary w-24"
-              disabled={!form.formState.isValid || isLoading}
-            >
-              Save
-            </button>
-            <button
-              type="button"
-              className="btn btn-secondary w-24"
-              onClick={() => setActiveForm('profile')}
-              disabled={isLoading}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      </form>
+      </Form>
     </div>
   )
 }

src/components/Form.tsx

@@ -0,0 +1,66 @@
+// Form.tsx
+import React from 'react'
+import { SubmitHandler } from 'react-hook-form'
+
+type FormProps = {
+  form: any; // Update this type based on your actual form state type
+  onSubmit: SubmitHandler<any>; // Update the type based on your form data type
+  onClose?: () => void;
+  onCancel?: () => void;
+  isSubmitting?: boolean;
+  allowDirtySubmit?: boolean;
+  children: React.ReactNode;
+}
+
+const Form: React.FC<FormProps> = ({
+  form,
+  onSubmit,
+  onClose = null,
+  onCancel = null,
+  isSubmitting = false,
+  allowDirtySubmit = false,
+  children
+}) => (
+  <div>
+    <form className="mt-4" onSubmit={form.handleSubmit(onSubmit)}>
+      {children}
+      <div className="flex justify-end mt-4">
+        <div className="space-x-2">
+          <button
+            type="submit"
+            className="btn btn-primary w-24"
+            disabled={
+              !form.formState.isValid ||
+              isSubmitting ||
+              (!allowDirtySubmit && form.formState.isDirty)
+            }
+          >
+            Save
+          </button>
+          {onClose && (
+            <button
+              type="button"
+              className="btn btn-secondary w-24"
+              onClick={onClose}
+              disabled={isSubmitting}
+            >
+              Close
+            </button>
+          )}
+          {onCancel && (
+            <button
+              type="button"
+              className="btn btn-secondary w-24"
+              onClick={onCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      </div>
+    </form>
+  </div>
+)
+
+export default Form