fixed tab controls

src/component/product/ProductActive.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import getImage from "../../utils/getImage";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import GeneralTab from "./settingsTab/GeneralTab";
@@ -8,17 +8,39 @@ import { productRefreshSite } from "../../services/services";
 
 export default function ProductActive({productData}){
     const iframe = useRef()
+   
+    const dataFields ={
+        site_title: { name: 'Title', controls: 'TEXT', active: true },
+        site_description: { name: 'Description', controls: 'TEXT', active: true },
+        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
+        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
+        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
+    }
+
+    const socialFields ={
+        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
+        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
+        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
+    }
+
+    const homeFields ={
+        banner_text: { name: 'Main Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Main Banner Text', controls: 'TEXTAREA', active: true },
+    }
 
     const settingsObject = {
-        home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
+        settings: { title: 'Settings', controls: 'settings', active: 'active show' , data: dataFields},
+        home_tab: { title: 'Home Page', controls: 'home', active: '' , data: homeFields},
         footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
         about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
         contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
-        social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
+        social_tab: { title: 'Socials', controls: 'social', active: '', data: socialFields },
         template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
         color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
     };
 
+     const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
+
     const refresh = useMutation({
         mutationFn: (fields) => {
             return productRefreshSite(fields)
@@ -34,7 +56,6 @@ export default function ProductActive({productData}){
             uid: localStorage.getItem('uid'), // USER UID
             product_id: productData.product_id,
             subscription_uid: productData.subscription_uid
-
         }
         refresh.mutate(reqData)
     }
@@ -81,12 +102,16 @@ export default function ProductActive({productData}){
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
                                                     <li className="nav-item">
-                                                    <a className={`nav-link ${value.active}`}
+                                                    <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
                                                         id={key} data-bs-toggle="pill"
-                                                        data-bs-target={`#${value.controls}`}
+                                                        // data-bs-target={`#${value.controls}`}
                                                         type="button" role="tab"
-                                                        aria-controls={value.controls}
-                                                        aria-selected="true">{value.title}</a>
+                                                        // aria-controls={value.controls}
+                                                        // aria-selected="true"
+                                                        onClick={()=>setActiveTab(value.controls)}
+                                                    >
+                                                        {value.title}
+                                                    </a>
                                                     </li>
                                                 ))}
                                             </>
@@ -94,9 +119,10 @@ export default function ProductActive({productData}){
                                         <div className="tab-content">
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <div className={`tab-pane fade  ${value.active}`}
-                                                        id={value.controls} role="tabpanel"
-                                                        aria-labelledby={key}>
+                                                    <div className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                        // id={value.controls} role="tabpanel"
+                                                        // aria-labelledby={key}
+                                                    >
                                                         <GeneralTab name={value.title} data={value.data} />
                                                     </div>
                                                 ))}

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,49 +1,36 @@
-import React from 'react'
+import React, {memo} from 'react'
 
-export default function GeneralTab({name='Full Name'}) {
-  return (
-    <div className="page-account-form">
-        <div className="p-0">
-            <form>
-                <h4>{name}</h4>
-                <div className="form-row">
-                    <div className="form-group col-md-12">
-                        <label htmlFor="name1">Full Name</label>
-                        <input type="text" className="form-control" id="name1"
-                                value="Alice Williams" />
+const GeneralTab = memo(({name='Full Name', data}) =>{
+      console.log("Page data == ", data)
+      return (
+        <div className="page-account-form">
+            <div className="p-0">
+                <form>
+                    <div className="form-row">
+                        <>
+                            {Object.entries(data)?.map(([key, value]) => (
+                                <div className="form-group col-md-12">
+                                    <label htmlFor="name1">{value.name}</label>
+                                    {value.controls == 'TEXT' ?
+                                        <input type="text" className="form-control" id={key} value="" />
+                                        :value.controls == 'TEXTAREA' ?
+                                        <textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
+                                        :
+                                        null
+                                    }
+                                </div>
+                            ))}
+                        </>
+                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
+                            <button type="submit" className="btn btn-primary">Update</button>
+                        </div>
                     </div>
-                    <div className="form-group col-md-12">
-                        <label htmlFor="title1">Title</label>
-                        <input type="text" className="form-control" id="title1"
-                                value="Marketing expert" />
-                    </div>
-                    <div className="form-group col-md-12">
-                        <label htmlFor="phone1">Phone Number</label>
-                        <input type="text" className="form-control" id="phone1"
-                                value="(01) 97 563 15613" />
-                    </div>
-                    <div className="form-group col-md-12">
-                        <label htmlFor="email1">Email</label>
-                        <input type="email" className="form-control" id="email1"
-                                value="alicewilliams@gmail.com" />
-                    </div>
-                </div>
-                <div className="form-group">
-                    <label htmlFor="add1">Address</label>
-                    <input type="text" className="form-control" id="add1"
-                            value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
-                </div>
-                <div className="form-group">
-                    <label htmlFor="add2">Address 2</label>
-                    <input type="text" className="form-control" id="add2"
-                            value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
-                </div>
-
-
-                <button type="submit" className="btn btn-primary">Update Information
-                </button>
-            </form>
+                </form>
+            </div>
         </div>
-    </div>
-  )
-}
+      )
+    }
+)
+
+
+export default GeneralTab