Skip to content

Commit

Permalink
Contributor stats countup added
Browse files Browse the repository at this point in the history
  • Loading branch information
@VinayLodhi1712
VinayLodhi1712 committed Nov 9, 2024
1 parent ed271d3 commit 37cab16
Showing 1 changed file with 68 additions and 42 deletions.
110 changes: 68 additions & 42 deletions frontend/src/Pages/contributor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -38,31 +40,55 @@ 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({});
const [loading, setLoading] = useState(true);
const [email, setEmail] = useState('');
const navigate = useNavigate();
const HomeClick = () => navigate('/');
const [viewed, setViewed] = useState(false);

useEffect(() => {
document.title = 'Station Saarthi | Contributors';
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit 37cab16

Please sign in to comment.