Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 7748ed7a by Ravindra Kanojiya
Options

updated

1 parent 266e6613
Inline Side-by-side
Showing 4 changed files with 43 additions and 19 deletions
components/Collection/TechnicalDetails.js
...@@ -111,9 +111,12 @@ const TechnicalDetails = ({productData}) => { ...@@ -111,9 +111,12 @@ const TechnicalDetails = ({productData}) => {
<Row> <Row>
<Col> <Col>
<div className="accordion01"> <div className="accordion01">
<Accordion defaultActiveKey="0"> <Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
{productData?.map((item) => ( {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.Header>{item.title}</Accordion.Header>
<Accordion.Body> <Accordion.Body>
...@@ -133,7 +136,10 @@ const TechnicalDetails = ({productData}) => { ...@@ -133,7 +136,10 @@ const TechnicalDetails = ({productData}) => {
{item?.details?.map((detail, index) => ( {item?.details?.map((detail, index) => (
<div className="item" key={index}> <div className="item" key={index}>
<div className="title">{detail?.label}</div> <div className="title">{detail?.label}</div>
<div className="info" dangerouslySetInnerHTML={{__html: detail?.value}}></div> <div
className="info"
dangerouslySetInnerHTML={{ __html: detail?.value }}
/>
</div> </div>
))} ))}
</Col> </Col>
...@@ -141,7 +147,7 @@ const TechnicalDetails = ({productData}) => { ...@@ -141,7 +147,7 @@ const TechnicalDetails = ({productData}) => {
</Accordion.Body> </Accordion.Body>
</Accordion.Item> </Accordion.Item>
))} ))}
</Accordion> </Accordion>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Collection/Video.js
...@@ -25,10 +25,10 @@ const Video = ({productData}) => { ...@@ -25,10 +25,10 @@ const Video = ({productData}) => {
return () => { return () => {
if (videoRef.current) observer.unobserve(videoRef.current); if (videoRef.current) observer.unobserve(videoRef.current);
}; };
}, []); }, []);
return ( return (
<section className="video_sec sec_padd collection-section"> <section className="video_sec">
<div className="custom_containers"> <div className="custom_containers">
<video <video
ref={videoRef} ref={videoRef}
......
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -12,6 +12,7 @@ import CompanyOverview from "@/components/Collection/CompanyOverview"; ...@@ -12,6 +12,7 @@ import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails"; import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore"; import Explore from "@/components/Collection/Explore";
import { Tab, Tabs } from "react-bootstrap"; import { Tab, Tabs } from "react-bootstrap";
import { useEffect, useState } from "react";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
...@@ -38,8 +39,13 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -38,8 +39,13 @@ const ProductPage = ({ productData, cataloguesData }) => {
label: productData.title, label: productData.title,
}, },
]; ];
const [activeTab, setActiveTab] = useState(null);
const productTabs = productData?.productTabs; const productTabs = productData?.productTabs;
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title);
}
}, [productTabs]);
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
...@@ -51,7 +57,11 @@ const productTabs = productData?.productTabs; ...@@ -51,7 +57,11 @@ const productTabs = productData?.productTabs;
<div className="custom_containers"> <div className="custom_containers">
<div className="details-tab"> <div className="details-tab">
<div className="head">Products:</div> <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) => ( {productTabs?.map((tab) => (
<Tab <Tab
key={tab.id} key={tab.id}
...@@ -67,17 +77,15 @@ const productTabs = productData?.productTabs; ...@@ -67,17 +77,15 @@ const productTabs = productData?.productTabs;
<Video productData={tab?.videoSection} /> <Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && ( {tab?.technicalDetails?.length > 0 && (
<TechnicalDetails <TechnicalDetails productData={tab?.technicalDetails} />
productData={tab?.technicalDetails}
/>
)} )}
{tab?.gallery?.length > 0 && ( {tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} /> <Gallery productData={tab?.gallery} />
)} )}
</Tab> </Tab>
))} ))}
</Tabs> </Tabs>
</div> </div>
</div> </div>
</section> </section>
......
pages/collections/[category]/[subCategory]/index.js
...@@ -17,6 +17,7 @@ import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryAp ...@@ -17,6 +17,7 @@ import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryAp
import { getCataloguesBySlug } from "@/services/cataloguesApi"; import { getCataloguesBySlug } from "@/services/cataloguesApi";
import { fetchFromStrapi } from "@/services/api"; import { fetchFromStrapi } from "@/services/api";
import { Tab, Tabs } from "react-bootstrap"; import { Tab, Tabs } from "react-bootstrap";
import { useEffect, useState } from "react";
const SubCategoryOrProductPage = ({ const SubCategoryOrProductPage = ({
type, type,
...@@ -47,8 +48,15 @@ const SubCategoryOrProductPage = ({ ...@@ -47,8 +48,15 @@ const SubCategoryOrProductPage = ({
label: productData.title, label: productData.title,
}, },
]; ];
const [activeTab, setActiveTab] = useState(null);
const productTabs = productData?.productTabs; const productTabs = productData?.productTabs;
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title);
}
}, [productTabs]);
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
...@@ -60,7 +68,11 @@ const productTabs = productData?.productTabs; ...@@ -60,7 +68,11 @@ const productTabs = productData?.productTabs;
<div className="custom_containers"> <div className="custom_containers">
<div className="details-tab"> <div className="details-tab">
<div className="head">Products:</div> <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) => ( {productTabs?.map((tab) => (
<Tab <Tab
key={tab.id} key={tab.id}
...@@ -76,17 +88,15 @@ const productTabs = productData?.productTabs; ...@@ -76,17 +88,15 @@ const productTabs = productData?.productTabs;
<Video productData={tab?.videoSection} /> <Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && ( {tab?.technicalDetails?.length > 0 && (
<TechnicalDetails <TechnicalDetails productData={tab?.technicalDetails} />
productData={tab?.technicalDetails}
/>
)} )}
{tab?.gallery?.length > 0 && ( {tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} /> <Gallery productData={tab?.gallery} />
)} )}
</Tab> </Tab>
))} ))}
</Tabs> </Tabs>
</div> </div>
</div> </div>
</section> </section>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!