From 37cab1688ecd823d3757e545047ee7dc2a51b85f Mon Sep 17 00:00:00 2001
From: Vinay Anand Lodhi <vinayanandlodhi12@gmail.com>
Date: Sat, 9 Nov 2024 16:54:18 +0530
Subject: [PATCH] Contributor stats countup added

---
 frontend/src/Pages/contributor.jsx | 110 ++++++++++++++++++-----------
 1 file changed, 68 insertions(+), 42 deletions(-)

diff --git a/frontend/src/Pages/contributor.jsx b/frontend/src/Pages/contributor.jsx
index 6ccc7d9..73d7e5e 100644
--- a/frontend/src/Pages/contributor.jsx
+++ b/frontend/src/Pages/contributor.jsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import backicon from '../assets/svg/backicon.svg';
 import { useNavigate } from 'react-router-dom';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
 
 const ContributorCard = ({ login, avatar_url, html_url, contributions, type }) => (
   <motion.div
@@ -38,24 +40,47 @@ const ContributorCard = ({ login, avatar_url, html_url, contributions, type }) =
 );
 
 
+const StatCard = ({ label, value, icon }) => {
+  const [viewed, setViewed] = useState(false);
 
-const StatCard = ({ label, value, icon }) => (
-  <motion.div 
-    initial={{ opacity: 0, y: 20 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.5 }}
-    className="flex items-center p-6 bg-white rounded-lg shadow-lg"
-  >
-    <div className="p-3 mr-4 bg-blue-100 rounded-full">
-      {icon}
-    </div>
-    <div>
-      <h3 className="text-3xl font-bold text-gray-800">{value}</h3>
-      <p className="text-gray-600">{label}</p>
-    </div>
-  </motion.div>
-);
-
+  return (
+      <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="flex items-center p-6 bg-white rounded-lg shadow-lg"
+      >
+          <div className="p-3 mr-4 bg-blue-100 rounded-full">
+              {icon}
+          </div>
+          <div>
+              {/* Visibility Sensor to trigger CountUp */}
+              <VisibilitySensor
+                  partialVisibility
+                  onChange={isVisible => {
+                      if (isVisible) setViewed(true);
+                  }}
+              >
+                  {({ isVisible }) => (
+                      <h3 className="text-3xl font-bold text-gray-800">
+                          {viewed || isVisible ? (
+                              <CountUp
+                                  start={0}
+                                  end={value}
+                                  duration={2.5}
+                                  separator=","
+                              />
+                          ) : (
+                              value
+                          )}
+                      </h3>
+                  )}
+              </VisibilitySensor>
+              <p className="text-gray-600">{label}</p>
+          </div>
+      </motion.div>
+  );
+};
 const contributor = () => {
   const [contributors, setContributors] = useState([]);
   const [repoStats, setRepoStats] = useState({});
@@ -63,6 +88,7 @@ const contributor = () => {
   const [email, setEmail] = useState('');
   const navigate = useNavigate();
   const HomeClick = () => navigate('/');
+  const [viewed, setViewed] = useState(false);
 
   useEffect(() => {
     document.title = 'Station Saarthi | Contributors'; 
@@ -140,40 +166,40 @@ const contributor = () => {
 
       {/* Stats Section */}
       <section className="px-4 py-16 bg-white sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-7xl">
-          <h2 className="mb-12 text-3xl font-bold text-center text-gray-900">Project Statistics</h2>
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+    <div className="mx-auto max-w-7xl">
+        <h2 className="mb-12 text-3xl font-bold text-center text-gray-900">Project Statistics</h2>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
             <StatCard 
-              label="Contributors" 
-              value={contributors.length} 
-              icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
-              </svg>}
+                label="Contributors" 
+                value={contributors.length} 
+                icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
+                </svg>}
             />
             <StatCard 
-              label="Total Contributions" 
-              value={contributors.reduce((sum, contributor) => sum + contributor.contributions, 0)} 
-              icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
-              </svg>}
+                label="Total Contributions" 
+                value={contributors.reduce((sum, contributor) => sum + contributor.contributions, 0)} 
+                icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+                </svg>}
             />
             <StatCard 
-              label="GitHub Stars" 
-              value={repoStats.stars || 0} 
-              icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-              </svg>}
+                label="GitHub Stars" 
+                value={repoStats.stars || 0} 
+                icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>}
             />
             <StatCard 
-              label="Forks" 
-              value={repoStats.forks || 0} 
-              icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
-              </svg>}
+                label="Forks" 
+                value={repoStats.forks || 0} 
+                icon={<svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+                </svg>}
             />
-          </div>
         </div>
-      </section>
+    </div>
+</section>
 
       {/* Contributors Grid */}
       <section className="px-4 py-16 bg-gray-100 sm:px-6 lg:px-8">