irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Services1.js
103 lines2.9 KBJavaScript
RawDownloadHistory
1import Link from "next/link";
2import { useState } from "react";
3import { ServiceData } from "../data/serviceData";
4
5function ServiceItem(props) {
6 const aboutLink = "/services/" + props.id;
7 return (
8 <div className="col-lg-4 col-md-6 col-sm-10">
9 <div
10 className="services-item wow fadeInUp"
11 data-wow-delay=".2s"
12 data-background="/assets/img/services/services_item01.jpg"
13 onMouseEnter={() => props.handleToggle(props.number)}
14 onMouseLeave={() => props.handleToggle(props.number)}
15 >
16 <div
17 className="services-icon"
18 style={{
19 display: `${props.isActive.key == props.number ? "none" : "flex"}`,
20 }}
21 >
22 <img src={props.icon} alt="" />
23 </div>
24 <div className="services-content">
25 <h2
26 className="title"
27 style={{
28 display: `${
29 props.isActive.key == props.number ? "none" : "block"
30 }`,
31 }}
32 >
33 <Link href={aboutLink}>{props.title}</Link>
34 </h2>
35 <h2 className="number">0{props.number}</h2>
36 </div>
37 <div
38 className="services-overlay-content"
39 style={{
40 display: `${props.isActive.key == props.number ? "block" : "none"}`,
41 }}
42 >
43 <h2 className="title">
44 <Link href={aboutLink}>{props.title}</Link>
45 </h2>
46 <p>{props.description}</p>
47 <Link href={aboutLink} className="read-more">
48 Read More <i className="fas fa-arrow-right" />
49 </Link>
50 </div>
51 </div>
52 </div>
53 );
54}
55
56export default function Services1() {
57 const [isActive, setIsActive] = useState({
58 status: false,
59 key: "",
60 });
61
62 const handleToggle = (key) => {
63 if (isActive.key === key) {
64 setIsActive({
65 status: false,
66 });
67 } else {
68 setIsActive({
69 status: true,
70 key,
71 });
72 }
73 };
74 const serviceData = new ServiceData();
75 const services = serviceData.findHighlights("areas");
76 return (
77 <>
78 <section className="services-area">
79 <div className="container">
80 <div className="row justify-content-center">
81 <div className="col-lg-6">
82 <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
83 <span className="sub-title tg-element-title">What We Do</span>
84 <h2 className="title tg-element-title">Our Services Areas</h2>
85 </div>
86 </div>
87 </div>
88 <div className="row justify-content-center">
89 {services.map((service, index) => (
90 <ServiceItem
91 key={`service-${index}`}
92 {...service}
93 number={index + 1}
94 handleToggle={handleToggle}
95 isActive={isActive}
96 />
97 ))}
98 </div>
99 </div>
100 </section>
101 </>
102 );
103}