From f58e8834fb4a0ac13e88e39170d5c31819ba0228 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 13 Sep 2024 10:22:04 +0100
Subject: [PATCH] added referal page header

---
 src/components/Referral/ReferralDisplay.jsx | 265 ++++++++++----------
 1 file changed, 132 insertions(+), 133 deletions(-)

diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index 1714da3..ade2c64 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -125,148 +125,147 @@ function ReferralDisplay() {
   }, [refHistoryReload]);
 
   return (
-    <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
-      <div className="content-tab-items lg:w-[230px] w-full mr-2">
-          <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
-              {tabs.map((item) => (
-                  <div key={item.id} className='w-full'>
-                      <TabButton 
-                          key={item.id}
-                          item={item.title}
-                          iconName={item.iconName}
-                          selectedTab={selectedTab}
-                          setSelectedTab={setSelectedTab}
-                      />
-                  </div>
-              ))}
+    <>
+      <div className='w-full'>
+        <div className="sm:flex justify-between items-center mb-6">
+          <div className="mb-5 sm:mb-0">
+            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+              <span>Refer a Friend</span>
+            </h1>
           </div>
+        </div>
       </div>
-      <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
-      <div className="flex-1 overflow-y-auto min-h-[520px]">
-        <>
-          <div className='hidden'>
-              <div className="sm:flex justify-between items-center mb-6">
-                <div className="mb-5 sm:mb-0">
-                  <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                    <span>Refer a Friend</span>
-                  </h1>
-                </div>
-              </div>
-          </div>
-          {selectedTab == 'Send Referral' &&
-            <div className="referral w-full p-4">
-              <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                Send Referral
-              </h2>
-              <Formik
-                initialValues={initialValues}
-                validationSchema={validationSchema}
-                onSubmit={handleSubmit}
-              >
-                {(props) => (
-                  <Form className="referral-info">
-                    <div className="block md:mb-6 md:flex gap-10">
-                      {/* Firstname */}
-                      <div className="field w-full mb-6 md:mb-0">
-                        <InputCom
-                          fieldClass="px-6"
-                          label="Firstname"
-                          type="text"
-                          name="ref_firstname"
-                          placeholder="Firstname"
-                          value={props.values.ref_firstname}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
+      <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+        <div className="content-tab-items lg:w-[230px] w-full mr-2">
+            <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+                {tabs.map((item) => (
+                    <div key={item.id} className='w-full'>
+                        <TabButton 
+                            key={item.id}
+                            item={item.title}
+                            iconName={item.iconName}
+                            selectedTab={selectedTab}
+                            setSelectedTab={setSelectedTab}
                         />
-                        {props.errors.ref_firstname &&
-                          props.touched.ref_firstname && (
-                            <p className="text-sm text-red-500">
-                              {props.errors.ref_firstname}
-                            </p>
-                          )}
-                      </div>
-
-                      {/* Lastname */}
-                      <div className="field w-full mb-6 md:mb-0">
-                        <InputCom
-                          fieldClass="px-6"
-                          label="Lastname"
-                          type="text"
-                          name="ref_lastname"
-                          placeholder="Lastname"
-                          value={props.values.ref_lastname}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                        />
-                        {props.errors.ref_lastname &&
-                          props.touched.ref_lastname && (
-                            <p className="text-sm text-red-500">
-                              {props.errors.ref_lastname}
-                            </p>
-                          )}
-                      </div>
                     </div>
-
-                    <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Email"
-                        type="text"
-                        name="ref_email"
-                        placeholder="Email"
-                        value={props.values.ref_email}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                      />
-                      {props.errors.ref_email && props.touched.ref_email && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_email}
-                        </p>
-                      )}
-                    </div>
-
-                    <hr />
-                    {error.message != "" && (
-                      <p className="text-base text-red-500 py-2">{error.message}</p>
-                    )}
-                    <div className="referral-btn flex justify-end items-center py-4">
-                      {error.loading ? (
-                        <LoadingSpinner size="6" color="sky-blue" />
-                      ) : (
-                        <button
-                          type="submit"
-                          className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        >
-                          Send Message
-                        </button>
-                      )}
-                    </div>
-                  </Form>
-                )}
-              </Formik>
+                ))}
             </div>
-          }
-
-          {selectedTab == 'Referral List' &&
-            <>
-              <div className="w-full p-4">
-                <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                  Referral List
+        </div>
+        <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+        <div className="flex-1 overflow-y-auto min-h-[520px]">
+          <>
+            {selectedTab == 'Send Referral' &&
+              <div className="referral w-full p-4">
+                <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                  Send Referral
                 </h2>
-                {referralList.loading ? (
-                  <LoadingSpinner size="22" color="sky-blue" />
-                ) : (
-                  <ReferralTable history={referralList} />
-                )}
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => (
+                    <Form className="referral-info">
+                      <div className="block md:mb-6 md:flex gap-10">
+                        {/* Firstname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Firstname"
+                            type="text"
+                            name="ref_firstname"
+                            placeholder="Firstname"
+                            value={props.values.ref_firstname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_firstname &&
+                            props.touched.ref_firstname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_firstname}
+                              </p>
+                            )}
+                        </div>
+
+                        {/* Lastname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Lastname"
+                            type="text"
+                            name="ref_lastname"
+                            placeholder="Lastname"
+                            value={props.values.ref_lastname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_lastname &&
+                            props.touched.ref_lastname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_lastname}
+                              </p>
+                            )}
+                        </div>
+                      </div>
+
+                      <div className="field w-full mb-6">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Email"
+                          type="text"
+                          name="ref_email"
+                          placeholder="Email"
+                          value={props.values.ref_email}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_email && props.touched.ref_email && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.ref_email}
+                          </p>
+                        )}
+                      </div>
+
+                      <hr />
+                      {error.message != "" && (
+                        <p className="text-base text-red-500 py-2">{error.message}</p>
+                      )}
+                      <div className="referral-btn flex justify-end items-center py-4">
+                        {error.loading ? (
+                          <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                          <button
+                            type="submit"
+                            className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            Send Message
+                          </button>
+                        )}
+                      </div>
+                    </Form>
+                  )}
+                </Formik>
               </div>
-            </>
-          }
-        </>
-
-
+            }
 
+            {selectedTab == 'Referral List' &&
+              <>
+                <div className="w-full p-4">
+                  <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                    Referral List
+                  </h2>
+                  {referralList.loading ? (
+                    <LoadingSpinner size="22" color="sky-blue" />
+                  ) : (
+                    <ReferralTable history={referralList} />
+                  )}
+                </div>
+              </>
+            }
+          </>
+        </div>
       </div>
-    </div>
+    </>
   );
 }