From 8c2b92d194fb5a88b5ba0edeaf2216625521a8dc Mon Sep 17 00:00:00 2001
From: BunyodL <blutfulloyev@bk.ru>
Date: Thu, 22 May 2025 09:26:52 +0500
Subject: [PATCH] update: get counter values from backend

---
 src/shared/components/about-counter.tsx | 75 +++++++++++++++----------
 src/widgets/stats-section.tsx           | 69 ++++++++++++++---------
 2 files changed, 88 insertions(+), 56 deletions(-)

diff --git a/src/shared/components/about-counter.tsx b/src/shared/components/about-counter.tsx
index 319fc62..ac8c7e1 100644
--- a/src/shared/components/about-counter.tsx
+++ b/src/shared/components/about-counter.tsx
@@ -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' />
+      {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={toNumber(stat.value)}
+                suffix={t(stat.suffix)}
+                decimals={stat.decimals || 0}
+              />
+            ) : (
+              `0${t(stat.suffix)}`
+            )}
+          </h3>
+          <p className='text-gray-600'>{t(stat.label)}</p>
         </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'>
-        <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} />
-          ) : (
-            '0%'
-          )}
-        </h3>
-        <p className='text-gray-600'>{t('about.stats.items.5.label')}</p>
-      </div>
+      ))}
     </div>
   );
 }
diff --git a/src/widgets/stats-section.tsx b/src/widgets/stats-section.tsx
index c3c57f4..5cfdb32 100644
--- a/src/widgets/stats-section.tsx
+++ b/src/widgets/stats-section.tsx
@@ -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'>
-            <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>
+          {stats.map(({ key, value, suffix, label }) => (
+            <div key={key} className='space-y-2'>
+              <h3 className='text-3xl font-bold'>
+                {isVisible ? (
+                  <AnimatedCounter
+                    end={toNumber(value)}
+                    suffix={t(suffix) || undefined}
+                  />
+                ) : (
+                  `0${t(suffix) || ''}`
+                )}
+              </h3>
+              <p className='text-sm text-white/80'>{t(label)}</p>
+            </div>
+          ))}
         </div>
       </Container>
     </section>