IndustryTab.js
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, { useState } from "react";
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
import { motion } from "framer-motion";
import Image from "next/image";
import { Col, Container, Row } from "react-bootstrap";
import { cleanImage } from "@/layout/imageHandling";
const IndustryTab = ({ serviceTitle, services }) => {
// console.log(
// services,"services"
// )
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<>
<section className="bg-light pb-100 pt-100">
<Container>
<Row>
<Col md={3} sm={12} className="mb-4 mb-md-0">
<div className="widget-area">
<div className="widget widget_service_categories">
<h3 className="widget-title">CFO Services</h3>
<Tabs selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)}>
<TabList>
{services.map((service, index) => (
<Tab key={service.id}>
<span>{service.Title}</span>
<i className="ri-arrow-right-s-line"></i>
</Tab>
))}
</TabList>
</Tabs>
</div>
</div>
</Col>
<Col md={9} sm={12}>
<Tabs selectedIndex={selectedIndex}>
{services.map((service, index) => (
<TabPanel key={index}>
<Row className="justify-content-center align-items-center">
{service.CfoList?.map((cfoItem, i) => (
<Col lg={4} md={6} sm={6} key={i}>
<motion.div
variants={{ hidden: { opacity: 0 }, show: { opacity: 1 } }}
initial="hidden"
whileInView="show"
viewport={{ once: false, amount: 0.4 }}
>
<div className="single-services-item industry-box">
<div className="d-flex align-items-center icon1">
<Image
src={cleanImage(cfoItem?.Icon?.url)}
alt={cfoItem?.Title}
width={40}
height={40}
className="img-fluid me-3"
/>
<h5>{cfoItem?.Title}</h5>
</div>
{cfoItem?.Description && <p>{cfoItem.Description}</p>}
</div>
</motion.div>
</Col>
))}
</Row>
</TabPanel>
))}
</Tabs>
</Col>
</Row>
</Container>
</section>
</>
);
};
export default IndustryTab;