irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Work2.js
110 lines6.6 KBJavaScript
RawDownloadHistory
1import { useState } from "react"
2
3
4export default function Work2() {
5 const [isActive, setIsActive] = useState({
6 status: false,
7 key: "",
8 })
9
10 const handleToggle = (key) => {
11 if (isActive.key === key) {
12 setIsActive({
13 status: false,
14 })
15 } else {
16 setIsActive({
17 status: true,
18 key,
19 })
20 }
21 }
22 return (
23 <>
24 <section className="work-area-two work-bg" data-background="/assets/img/bg/work_bg.jpg">
25 <div className="container">
26 <div className="row justify-content-center">
27 <div className="col-lg-10">
28 <div className="section-title text-center mb-60 tg-heading-subheading animation-style3">
29 <span className="sub-title tg-element-title">Meet Our Engineers</span>
30 <h2 className="title tg-element-title">How Our Engineers Work</h2>
31 </div>
32 </div>
33 </div>
34 <div className="row">
35 <div className="col-lg-12">
36 <div className="work-inner" data-background="/assets/img/images/h3_work_img.jpg">
37 <div className="work-tooltip-wrap">
38 <div className={isActive.key == 1 ? "tooltip-item top active" : "tooltip-item top"} onClick={() => handleToggle(1)}>
39 <div className="tooltip-btn pulse">
40 <i className="fas fa-plus" />
41 </div>
42 <div className="tooltip-content">
43 <h2 className="title">Combustion Roof Vent</h2>
44 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
45 </div>
46 </div>
47 <div className={isActive.key == 2 ? "tooltip-item top active" : "tooltip-item top"} onClick={() => handleToggle(2)}>
48 <div className="tooltip-btn pulse">
49 <i className="fas fa-plus" />
50 </div>
51 <div className="tooltip-content">
52 <h2 className="title">Combustion Roof Vent</h2>
53 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
54 </div>
55 </div>
56 <div className={isActive.key == 3 ? "tooltip-item active" : "tooltip-item"} onClick={() => handleToggle(3)}>
57 <div className="tooltip-btn pulse">
58 <i className="fas fa-plus" />
59 </div>
60 <div className="tooltip-content">
61 <h2 className="title">Combustion Roof Vent</h2>
62 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
63 </div>
64 </div>
65 <div className={isActive.key == 4 ? "tooltip-item active" : "tooltip-item"} onClick={() => handleToggle(4)}>
66 <div className="tooltip-btn pulse">
67 <i className="fas fa-plus" />
68 </div>
69 <div className="tooltip-content">
70 <h2 className="title">Combustion Roof Vent</h2>
71 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
72 </div>
73 </div>
74 <div className={isActive.key == 5 ? "tooltip-item active" : "tooltip-item"} onClick={() => handleToggle(5)}>
75 <div className="tooltip-btn pulse">
76 <i className="fas fa-plus" />
77 </div>
78 <div className="tooltip-content">
79 <h2 className="title">Combustion Roof Vent</h2>
80 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
81 </div>
82 </div>
83 <div className={isActive.key == 6 ? "tooltip-item active" : "tooltip-item"} onClick={() => handleToggle(6)}>
84 <div className="tooltip-btn pulse">
85 <i className="fas fa-plus" />
86 </div>
87 <div className="tooltip-content">
88 <h2 className="title">Combustion Roof Vent</h2>
89 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
90 </div>
91 </div>
92 <div className={isActive.key == 7 ? "tooltip-item active" : "tooltip-item"} onClick={() => handleToggle(7)}>
93 <div className="tooltip-btn pulse">
94 <i className="fas fa-plus" />
95 </div>
96 <div className="tooltip-content">
97 <h2 className="title">Combustion Roof Vent</h2>
98 <p>Suffered alteration in some a goody form, by injected humor, or into the randomized word.</p>
99 </div>
100 </div>
101 </div>
102 </div>
103 </div>
104 </div>
105 </div>
106 </section>
107
108 </>
109 )
110}