dev-chiefworks
78 lines
2.0 KiB
React
78 lines
2.0 KiB
React
'use client'
|
|
|
|
|
|
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
import CountUp from "react-countup";
|
|
import VisibilitySensor from "react-visibility-sensor";
|
|
|
|
const counterUpContent = [
|
|
{
|
|
startCount: "0",
|
|
endCount: "13",
|
|
meta: "Projects",
|
|
colorClass: "color-one",
|
|
},
|
|
{
|
|
startCount: "0",
|
|
endCount: "3",
|
|
meta: "Workers",
|
|
colorClass: "color-two",
|
|
},
|
|
{
|
|
startCount: "0",
|
|
endCount: "123",
|
|
meta: "Offices",
|
|
colorClass: "color-three",
|
|
},
|
|
];
|
|
|
|
const CounterOne = () => {
|
|
const [focus, setFocus] = React.useState(false);
|
|
return (
|
|
<div className="counter-info-classic">
|
|
{counterUpContent.map((val, i) => (
|
|
<div className={`counter-box-one ${val.colorClass}`} key={i}>
|
|
<h2 className="number font-rubik">
|
|
<span className="timer">
|
|
{" "}
|
|
<CountUp
|
|
start={focus ? val.startCount : null}
|
|
end={val.endCount}
|
|
duration={1}
|
|
redraw={true}
|
|
>
|
|
{({ countUpRef }) => (
|
|
<VisibilitySensor
|
|
onChange={(isVisible) => {
|
|
if (isVisible) {
|
|
setFocus(true);
|
|
}
|
|
}}
|
|
>
|
|
<span ref={countUpRef} />
|
|
</VisibilitySensor>
|
|
)}
|
|
</CountUp>{" "}
|
|
</span>{" "}
|
|
k
|
|
</h2>
|
|
<p className="font-rubik">{val.meta}</p>
|
|
</div>
|
|
))}
|
|
|
|
<div className="bubble-one"></div>
|
|
<div className="bubble-two"></div>
|
|
<div className="bubble-three"></div>
|
|
<div className="bubble-four"></div>
|
|
<div className="bubble-five"></div>
|
|
<div className="bubble-six"></div>
|
|
<div className="bubble-seven"></div>
|
|
<Image width="242" height="387" src="/images/shape/8.svg" alt="image" className="cs-screen dot-shape" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CounterOne;
|