72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import { Container } from '@/shared/components/container';
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
|
|
import AnimatedCounter from '../shared/components/animated-counter';
|
|
|
|
export function StatsSection() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
const { t } = useTextController();
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const [entry] = entries;
|
|
if (entry.isIntersecting) {
|
|
setIsVisible(true);
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{
|
|
threshold: 0.1,
|
|
},
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={sectionRef} className='bg-red-600 text-white'>
|
|
<Container>
|
|
<div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
|
|
<div className='space-y-2'>
|
|
<h3 className='text-3xl font-bold'>
|
|
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
|
|
</h3>
|
|
<p className='text-sm text-white/80'>{t('home.stats.stations')}</p>
|
|
</div>
|
|
<div className='space-y-2'>
|
|
<h3 className='text-3xl font-bold'>
|
|
{isVisible ? <AnimatedCounter end={10000} suffix='+' /> : '0+'}
|
|
</h3>
|
|
<p className='text-sm text-white/80'>{t('home.stats.daily')}</p>
|
|
</div>
|
|
<div className='space-y-2'>
|
|
<h3 className='text-3xl font-bold'>
|
|
{isVisible ? <AnimatedCounter end={15} /> : '0'}
|
|
</h3>
|
|
<p className='text-sm text-white/80'>{t('home.stats.years')}</p>
|
|
</div>
|
|
<div className='space-y-2'>
|
|
<h3 className='text-3xl font-bold'>
|
|
{isVisible ? <AnimatedCounter end={24} suffix='/7' /> : '0/7'}
|
|
</h3>
|
|
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|