updated

components/Collection/TechnicalDetails.js

@@ -111,9 +111,12 @@ const TechnicalDetails = ({productData}) => {
           <Row>
             <Col>
               <div className="accordion01">
-                <Accordion defaultActiveKey="0">
+               <Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
   {productData?.map((item) => (
-                        <Accordion.Item eventKey={item.id} key={item.id}>
+    <Accordion.Item
+      eventKey={item.id.toString()}
+      key={item.id}
+    >
       <Accordion.Header>{item.title}</Accordion.Header>
 
       <Accordion.Body>
@@ -133,7 +136,10 @@ const TechnicalDetails = ({productData}) => {
             {item?.details?.map((detail, index) => (
               <div className="item" key={index}>
                 <div className="title">{detail?.label}</div>
-                                    <div className="info" dangerouslySetInnerHTML={{__html: detail?.value}}></div>
+                <div
+                  className="info"
+                  dangerouslySetInnerHTML={{ __html: detail?.value }}
+                />
               </div>
             ))}
           </Col>
@@ -141,7 +147,7 @@ const TechnicalDetails = ({productData}) => {
       </Accordion.Body>
     </Accordion.Item>
   ))}
-                    </Accordion>
+</Accordion>
               </div>
             </Col>
           </Row>

components/Collection/Video.js

@@ -25,10 +25,10 @@ const Video = ({productData}) => {
   return () => {
     if (videoRef.current) observer.unobserve(videoRef.current);
   };
- }, []);
+}, []);
 
   return (
-    <section className="video_sec sec_padd collection-section">
+    <section className="video_sec">
       <div className="custom_containers">
         <video
           ref={videoRef}

pages/collections/[category]/[subCategory]/[productSlug].js

@@ -12,6 +12,7 @@ import CompanyOverview from "@/components/Collection/CompanyOverview";
 import TechnicalDetails from "@/components/Collection/TechnicalDetails";
 import Explore from "@/components/Collection/Explore";
 import { Tab, Tabs } from "react-bootstrap";
+import { useEffect, useState } from "react";
 
 const ProductPage = ({ productData, cataloguesData }) => {
   
@@ -38,8 +39,13 @@ const ProductPage = ({ productData, cataloguesData }) => {
       label: productData.title,
     },
   ];
-
+const [activeTab, setActiveTab] = useState(null);
 const productTabs = productData?.productTabs;
+useEffect(() => {
+  if (productTabs?.length > 0) {
+    setActiveTab(productTabs[0].title);
+  }
+}, [productTabs]);
   return (
     <>
         <Breadcrumb breadcrumbData={breadcrumbData} />
@@ -51,7 +57,11 @@ const productTabs = productData?.productTabs;
             <div className="custom_containers">
               <div className="details-tab">
                 <div className="head">Products:</div>
-                <Tabs defaultActiveKey={productTabs?.[0]?.title} className="tab-01">
+                <Tabs
+  activeKey={activeTab}
+  onSelect={(k) => setActiveTab(k)}
+  className="tab-01"
+>
   {productTabs?.map((tab) => (
     <Tab
       key={tab.id}
@@ -67,17 +77,15 @@ const productTabs = productData?.productTabs;
       <Video productData={tab?.videoSection} />
 
       {tab?.technicalDetails?.length > 0 && (
-                            <TechnicalDetails
-                              productData={tab?.technicalDetails}
-                            />
+        <TechnicalDetails productData={tab?.technicalDetails} />
       )}
+
       {tab?.gallery?.length > 0 && (
         <Gallery productData={tab?.gallery} />
       )}
-                        
     </Tab>
   ))}
-                  </Tabs>
+</Tabs>
               </div>
             </div>
           </section>

pages/collections/[category]/[subCategory]/index.js

@@ -17,6 +17,7 @@ import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryAp
 import { getCataloguesBySlug } from "@/services/cataloguesApi";
 import { fetchFromStrapi } from "@/services/api";
 import { Tab, Tabs } from "react-bootstrap";
+import { useEffect, useState } from "react";
 
 const SubCategoryOrProductPage = ({
   type,
@@ -47,8 +48,15 @@ const SubCategoryOrProductPage = ({
         label: productData.title,
       },
     ];
+const [activeTab, setActiveTab] = useState(null);
+
 
 const productTabs = productData?.productTabs;
+useEffect(() => {
+  if (productTabs?.length > 0) {
+    setActiveTab(productTabs[0].title);
+  }
+}, [productTabs]);
     return (
       <>
         <Breadcrumb breadcrumbData={breadcrumbData} />
@@ -60,7 +68,11 @@ const productTabs = productData?.productTabs;
             <div className="custom_containers">
               <div className="details-tab">
                 <div className="head">Products:</div>
-                <Tabs defaultActiveKey={productTabs?.[0]?.title} className="tab-01">
+               <Tabs
+  activeKey={activeTab}
+  onSelect={(k) => setActiveTab(k)}
+  className="tab-01"
+>
   {productTabs?.map((tab) => (
     <Tab
       key={tab.id}
@@ -76,17 +88,15 @@ const productTabs = productData?.productTabs;
       <Video productData={tab?.videoSection} />
 
       {tab?.technicalDetails?.length > 0 && (
-                            <TechnicalDetails
-                              productData={tab?.technicalDetails}
-                            />
+        <TechnicalDetails productData={tab?.technicalDetails} />
       )}
+
       {tab?.gallery?.length > 0 && (
         <Gallery productData={tab?.gallery} />
       )}
-                        
     </Tab>
   ))}
-                  </Tabs>
+</Tabs>
               </div>
             </div>
           </section>