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 127 additions and 103 deletions
components/Collection/TechnicalDetails.js
......@@ -111,37 +111,43 @@ const TechnicalDetails = ({productData}) => {
<Row>
<Col>
<div className="accordion01">
<Accordion defaultActiveKey="0">
{productData?.map((item) => (
<Accordion.Item eventKey={item.id} key={item.id}>
<Accordion.Header>{item.title}</Accordion.Header>
<Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
{productData?.map((item) => (
<Accordion.Item
eventKey={item.id.toString()}
key={item.id}
>
<Accordion.Header>{item.title}</Accordion.Header>
<Accordion.Body>
<Row>
<Col md={5}>
<div className="image">
<Image
src={cleanImage(item?.image?.url)}
alt={item.title}
width={743}
height={500}
/>
</div>
</Col>
<Accordion.Body>
<Row>
<Col md={5}>
<div className="image">
<Image
src={cleanImage(item?.image?.url)}
alt={item.title}
width={743}
height={500}
/>
</div>
</Col>
<Col md={7}>
{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>
))}
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
<Col md={7}>
{item?.details?.map((detail, index) => (
<div className="item" key={index}>
<div className="title">{detail?.label}</div>
<div
className="info"
dangerouslySetInnerHTML={{ __html: detail?.value }}
/>
</div>
))}
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</div>
</Col>
</Row>
......
components/Collection/Video.js
......@@ -8,27 +8,27 @@ const Video = ({productData}) => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
// 👇 Stop observing after first visibility
observer.unobserve(entry.target);
}
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
// 👇 Stop observing after first visibility
observer.unobserve(entry.target);
}
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
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,33 +57,35 @@ 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">
{productTabs?.map((tab) => (
<Tab
key={tab.id}
eventKey={tab.title}
title={tab.title}
>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails
productData={tab?.technicalDetails}
/>
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
</Tab>
))}
</Tabs>
<Tabs
activeKey={activeTab}
onSelect={(k) => setActiveTab(k)}
className="tab-01"
>
{productTabs?.map((tab) => (
<Tab
key={tab.id}
eventKey={tab.title}
title={tab.title}
>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} />
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
</Tab>
))}
</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,33 +68,35 @@ 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">
{productTabs?.map((tab) => (
<Tab
key={tab.id}
eventKey={tab.title}
title={tab.title}
>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails
productData={tab?.technicalDetails}
/>
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
</Tab>
))}
</Tabs>
<Tabs
activeKey={activeTab}
onSelect={(k) => setActiveTab(k)}
className="tab-01"
>
{productTabs?.map((tab) => (
<Tab
key={tab.id}
eventKey={tab.title}
title={tab.title}
>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} />
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
</Tab>
))}
</Tabs>
</div>
</div>
</section>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!