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}) => { ...@@ -111,37 +111,43 @@ 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
<Accordion.Header>{item.title}</Accordion.Header> eventKey={item.id.toString()}
key={item.id}
>
<Accordion.Header>{item.title}</Accordion.Header>
<Accordion.Body> <Accordion.Body>
<Row> <Row>
<Col md={5}> <Col md={5}>
<div className="image"> <div className="image">
<Image <Image
src={cleanImage(item?.image?.url)} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item.title}
width={743} width={743}
height={500} height={500}
/> />
</div> </div>
</Col> </Col>
<Col md={7}> <Col md={7}>
{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
</div> className="info"
))} dangerouslySetInnerHTML={{ __html: detail?.value }}
</Col> />
</Row> </div>
</Accordion.Body> ))}
</Accordion.Item> </Col>
))} </Row>
</Accordion> </Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Collection/Video.js
...@@ -8,27 +8,27 @@ const Video = ({productData}) => { ...@@ -8,27 +8,27 @@ const Video = ({productData}) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
setIsVisible(true); setIsVisible(true);
// 👇 Stop observing after first visibility // 👇 Stop observing after first visibility
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}, },
{ threshold: 0.5 } { threshold: 0.5 }
); );
if (videoRef.current) observer.observe(videoRef.current); if (videoRef.current) observer.observe(videoRef.current);
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,33 +57,35 @@ const productTabs = productData?.productTabs; ...@@ -51,33 +57,35 @@ 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
{productTabs?.map((tab) => ( activeKey={activeTab}
<Tab onSelect={(k) => setActiveTab(k)}
key={tab.id} className="tab-01"
eventKey={tab.title} >
title={tab.title} {productTabs?.map((tab) => (
> <Tab
<AboutInfo productData={tab?.aboutInfo} /> key={tab.id}
eventKey={tab.title}
<CompanyOverview title={tab.title}
companyOverviewData={tab?.companyOverview?.items} >
/> <AboutInfo productData={tab?.aboutInfo} />
<Video productData={tab?.videoSection} /> <CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
{tab?.technicalDetails?.length > 0 && ( />
<TechnicalDetails
productData={tab?.technicalDetails} <Video productData={tab?.videoSection} />
/>
)} {tab?.technicalDetails?.length > 0 && (
{tab?.gallery?.length > 0 && ( <TechnicalDetails productData={tab?.technicalDetails} />
<Gallery productData={tab?.gallery} /> )}
)}
{tab?.gallery?.length > 0 && (
</Tab> <Gallery productData={tab?.gallery} />
))} )}
</Tabs> </Tab>
))}
</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,33 +68,35 @@ const productTabs = productData?.productTabs; ...@@ -60,33 +68,35 @@ 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
{productTabs?.map((tab) => ( activeKey={activeTab}
<Tab onSelect={(k) => setActiveTab(k)}
key={tab.id} className="tab-01"
eventKey={tab.title} >
title={tab.title} {productTabs?.map((tab) => (
> <Tab
<AboutInfo productData={tab?.aboutInfo} /> key={tab.id}
eventKey={tab.title}
<CompanyOverview title={tab.title}
companyOverviewData={tab?.companyOverview?.items} >
/> <AboutInfo productData={tab?.aboutInfo} />
<Video productData={tab?.videoSection} /> <CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
{tab?.technicalDetails?.length > 0 && ( />
<TechnicalDetails
productData={tab?.technicalDetails} <Video productData={tab?.videoSection} />
/>
)} {tab?.technicalDetails?.length > 0 && (
{tab?.gallery?.length > 0 && ( <TechnicalDetails productData={tab?.technicalDetails} />
<Gallery productData={tab?.gallery} /> )}
)}
{tab?.gallery?.length > 0 && (
</Tab> <Gallery productData={tab?.gallery} />
))} )}
</Tabs> </Tab>
))}
</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!