adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: get counter values from backend

Browse Source
This commit is contained in:
BunyodL 2025-05-22 09:26:52 +05:00
parent 6e3a498d46
commit 8c2b92d194
2 changed files with 88 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/shared/components/about-counter.tsx
View File

@ -7,47 +7,60 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { useIntersectionObserver } from '../hooks/use-intersection-observer';
import AnimatedCounter from './animated-counter';
const stats = [
{
value: 'about.stats.items.2.value',
suffix: 'about.stats.items.2.suffix',
label: 'about.stats.items.2.label',
},
{
value: 'about.stats.items.4.value',
suffix: 'about.stats.items.4.suffix',
label: 'about.stats.items.4.label',
},
{
value: 'about.stats.items.5.value',
suffix: 'about.stats.items.5.suffix',
label: 'about.stats.items.5.label',
decimals: 1,
},
];
export default function AboutCounter() {
const { t } = useTextController();
const { sectionRef, isVisible } = useIntersectionObserver<HTMLDivElement>();
const toNumber = (value: string) => {
return Number(t(value));
};
return (
<div
ref={sectionRef}
className='my-4 grid grid-cols-1 gap-6 text-center md:my-8'
>
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Users className='h-6 w-6 text-red-600' />
</div>
<h3 className='text-2xl font-bold text-gray-900'>
{isVisible ? <AnimatedCounter end={150} suffix='+' /> : '0+'}
</h3>
<p className='text-gray-600'>{t('about.stats.items.2.label')}</p>
</div>
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Users className='h-6 w-6 text-red-600' />
</div>
<h3 className='text-2xl font-bold text-gray-900'>
{isVisible ? <AnimatedCounter end={5} suffix='M+' /> : '0M+'}
</h3>
<p className='text-gray-600'>{t('about.stats.items.4.label')}</p>
</div>
<div className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'>
{stats.map((stat, index) => (
<div
key={index}
className='transform rounded-lg bg-white p-3 shadow-md transition-transform hover:scale-105 sm:p-6'
>
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
<Users className='h-6 w-6 text-red-600' />
</div>
<h3 className='text-2xl font-bold text-gray-900'>
{isVisible ? (
<AnimatedCounter end={98} suffix='%' decimals={1} />
<AnimatedCounter
end={toNumber(stat.value)}
suffix={t(stat.suffix)}
decimals={stat.decimals || 0}
/>
) : (
'0%'
`0${t(stat.suffix)}`
)}
</h3>
<p className='text-gray-600'>{t('about.stats.items.5.label')}</p>
<p className='text-gray-600'>{t(stat.label)}</p>
</div>
))}
</div>
);
}

63
src/widgets/stats-section.tsx
View File

@ -6,39 +6,58 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
import AnimatedCounter from '../shared/components/animated-counter';
const stats = [
{
key: 'stations',
value: 'home.stats.stations.value',
suffix: 'home.stats.stations.suffix',
label: 'home.stats.stations',
},
{
key: 'daily',
value: 'home.stats.daily.value',
suffix: 'home.stats.daily.suffix',
label: 'home.stats.daily',
},
{
key: 'years',
value: 'home.stats.years.value',
suffix: '',
label: 'home.stats.years',
},
{
key: 'mode',
value: 'home.stats.mode.value',
suffix: 'home.stats.mode.suffix',
label: 'home.stats.mode',
},
];
export function StatsSection() {
const { t } = useTextController();
const { sectionRef, isVisible } = useIntersectionObserver<HTMLDivElement>();
const toNumber = (value: string) => Number(t(value));
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'>
{stats.map(({ key, value, suffix, label }) => (
<div key={key} className='space-y-2'>
<h3 className='text-3xl font-bold'>
{isVisible ? <AnimatedCounter end={25} suffix='+' /> : '0+'}
{isVisible ? (
<AnimatedCounter
end={toNumber(value)}
suffix={t(suffix) || undefined}
/>
) : (
`0${t(suffix) || ''}`
)}
</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>
<p className='text-sm text-white/80'>{t(label)}</p>
</div>
))}
</div>
</Container>
</section>