fix: scroll triger

WeMakeDevs · Aug 14, 2023 · 1d55837 · 1d55837
1 parent 3c43fcc
commit 1d55837
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 79 deletions.
diff --git a/src/components/PageComp/EventsPage/Stats.jsx b/src/components/PageComp/EventsPage/Stats.jsx
@@ -1,52 +1,26 @@
-import { useState } from 'react';
-import { FaUsers } from 'react-icons/fa';
-import { FaFontAwesomeFlag } from 'react-icons/fa';
+import { FaFontAwesomeFlag, FaUsers } from 'react-icons/fa';
 import { MdOutlineAttachMoney } from 'react-icons/md';
 import { VscSymbolEvent } from 'react-icons/vsc';
-import ScrollTrigger from 'react-scroll-trigger';
 
 import CounterCard from '@/components/Cards/CounterCard';
 
 const Stats = () => {
-  const [counterOn, setCounterOn] = useState(false);
-
   return (
-    <ScrollTrigger
-      onEnter={() => setCounterOn(true)}
-      onExit={() => setCounterOn(false)}
-    >
-      <div className='layout mx-auto pb-20'>
-        <h2 className='h1'>Numbers say it all</h2>
-        <hr className='styled-hr my-6' />
-        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4'>
-          <CounterCard
-            counterOn={counterOn}
-            icon={MdOutlineAttachMoney}
-            number={20000}
-            prefix='$'
-            title='Prizes'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaFontAwesomeFlag}
-            number={30}
-            title='Countries'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaUsers}
-            number={30000}
-            title='Participants'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={VscSymbolEvent}
-            number={200000}
-            title='Empowered'
-          />
-        </div>
+    <div className='layout mx-auto pb-20'>
+      <h2 className='h1'>Numbers say it all</h2>
+      <hr className='styled-hr my-6' />
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4'>
+        <CounterCard
+          icon={MdOutlineAttachMoney}
+          number={20000}
+          prefix='$'
+          title='Prizes'
+        />
+        <CounterCard icon={FaFontAwesomeFlag} number={30} title='Countries' />
+        <CounterCard icon={FaUsers} number={30000} title='Participants' />
+        <CounterCard icon={VscSymbolEvent} number={200000} title='Empowered' />
       </div>
-    </ScrollTrigger>
+    </div>
   );
 };
 

diff --git a/src/components/PageComp/HomePage/Stats.jsx b/src/components/PageComp/HomePage/Stats.jsx
@@ -1,48 +1,19 @@
-import { useState } from 'react';
 import { FaGraduationCap, FaMagic, FaUsers, FaYoutube } from 'react-icons/fa';
-import ScrollTrigger from 'react-scroll-trigger';
 
 import CounterCard from '@/components/Cards/CounterCard';
 
 const Stats = () => {
-  const [counterOn, setCounterOn] = useState(false);
-
   return (
-    <ScrollTrigger
-      onEnter={() => setCounterOn(true)}
-      onExit={() => setCounterOn(false)}
-    >
-      <div className='layout mx-auto pb-20'>
-        <h2 className='h1'>Numbers say it all</h2>
-        <hr className='styled-hr my-6' />
-        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4'>
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaUsers}
-            number={56000}
-            title='Members'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaMagic}
-            number={20000}
-            title='Reviews'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaYoutube}
-            number={350000}
-            title='Reviews'
-          />
-          <CounterCard
-            counterOn={counterOn}
-            icon={FaGraduationCap}
-            number={500}
-            title='Colleges'
-          />
-        </div>
+    <div className='layout mx-auto pb-20'>
+      <h2 className='h1'>Numbers say it all</h2>
+      <hr className='styled-hr my-6' />
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4'>
+        <CounterCard icon={FaUsers} number={56000} title='Members' />
+        <CounterCard icon={FaMagic} number={20000} title='Reviews' />
+        <CounterCard icon={FaYoutube} number={350000} title='Reviews' />
+        <CounterCard icon={FaGraduationCap} number={500} title='Colleges' />
       </div>
-    </ScrollTrigger>
+    </div>
   );
 };